/* ============================================================
   Humart Design System — tokens (color, type, spacing, radii,
   shadows, motion). Importado en layout.liquid.
   Copia del DS oficial (Humart Design System/colors_and_type.css)
   con dos ajustes:
     1. Fuente: el equipo usa Merriweather Sans en producción
        (no Merriweather serif + Inter como sugería el DS).
        --font-serif y --font-sans apuntan ambos a Merriweather Sans.
     2. Bridge de alias al final: los partials viejos siguen
        usando --humart-color, --theme-primary, etc. Estos quedan
        mapeados al nuevo sistema para no romper render durante la
        migración progresiva.
   ============================================================ */

/* Fonts: Merriweather Sans ya viene preloadeada en layout.liquid
   desde Google Fonts. No re-importamos aquí. */

:root {
  /* — Brand / structure ——————————————————————————— */
  --navy:            #162041;
  --navy-900:        #0e1530;
  --navy-700:        #1e2c54;
  --navy-100:        #e7eaf2;
  --ink:             #162041;

  /* — Trust / confirmation (mint) ——————————————————— */
  --mint:            #2ECC8F;
  --mint-700:        #21a572;
  --mint-50:         #e8f9f1;

  /* — Urgency / savings (coral) ————————————————————— */
  --coral:           #FF6B6B;
  --coral-700:       #e0494a;
  --coral-50:        #fff1f1;

  /* — Neutrals ——————————————————————————————————————— */
  --bg:              #ffffff;
  --bg-soft:         #f6f7fb;
  --bg-tint:         #f1f3fa;
  --line:            #e4e7f0;
  --line-strong:     #cbd1de;

  /* — Text ——————————————————————————————————————————— */
  --fg:              #162041;
  --fg-2:            #4a5670;
  --fg-3:            #7e879c;
  --fg-muted:        #a2aabb;
  --on-navy:         #ffffff;
  --on-navy-2:       rgba(255,255,255,0.72);

  /* — Status ————————————————————————————————————————— */
  --success:         var(--mint);
  --success-bg:      var(--mint-50);
  --danger:          var(--coral);
  --danger-bg:       var(--coral-50);

  /* — Payment brand accents ————————————————————————— */
  --pay-bizum:       #4ec3e0;
  --pay-visa:        #1a1f71;
  --pay-mastercard:  #eb001b;
  --pay-amex:        #006fcf;
  --pay-klarna:      #ffa8cd;
  --pay-paypal:      #003087;
  --pay-paypal-2:    #009cde;

  /* — Typography. Producción usa Merriweather Sans para todo. */
  --font-serif:      'Merriweather Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-sans:       'Merriweather Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:       ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-22: 22px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-48: 48px;

  --lh-tight:        1.15;
  --lh-snug:         1.3;
  --lh-normal:       1.55;
  --lh-loose:        1.75;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;

  /* — Spacing ——————————————————————————————————————— */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* — Radii ————————————————————————————————————————— */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 18px;
  --radius-pill: 999px;

  /* — Shadows ——————————————————————————————————————— */
  --shadow-1: 0 1px 2px rgba(22,32,65,0.04), 0 1px 1px rgba(22,32,65,0.04);
  --shadow-2: 0 4px 12px rgba(22,32,65,0.06), 0 1px 2px rgba(22,32,65,0.04);
  --shadow-3: 0 12px 32px rgba(22,32,65,0.10), 0 2px 6px rgba(22,32,65,0.05);
  --shadow-focus: 0 0 0 3px rgba(58,99,255,0.18);

  /* — Motion ———————————————————————————————————————— */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;

  /* — Layout ———————————————————————————————————————— */
  --page-width: 1200px;
  --page-pad:   20px;
  --tap:        44px;

  /* ============================================================
     BRIDGE — alias de tokens legacy a los nuevos.
     Los partials existentes (storefront-header, footer, accordion,
     etc.) seguirán renderizando idéntico mientras los migramos.
     Eliminar bloque cuando todos los partials usen los tokens del DS.
     ============================================================ */
  --humart-color:    var(--navy);
  --humart-light:    var(--navy-700);
  --humart-accent:   #3a63ff;            /* azul eléctrico legacy del header logo */
  --humart-green:    var(--mint);
  --humart-dark:     var(--navy-900);
  --humart-glow:     var(--shadow-focus);

  --h-blue:          var(--navy);
  --h-blue-light:    var(--navy-700);
  --h-green:         var(--mint);

  --bg-white:        var(--bg);
  --border-color:    var(--line);
  --brand-dark:      var(--navy);
  --panel:           var(--bg);
  --shadow:          var(--shadow-1);
  --glow:            var(--shadow-focus);
  --glow-color:      rgba(58,99,255,0.18);

  --theme-primary:   var(--navy);
  --theme-accent:    #3a63ff;
  --theme-bg:        var(--bg);
  --theme-text:      var(--ink);

  /* Dawn legacy (RGB triplets — usados por componentes Shopify-style) */
  --color-base-text:                  22, 32, 65;
  --color-base-background-1:          255, 255, 255;
  --color-base-background-2:          246, 247, 251;
  --color-base-solid-button-labels:   255, 255, 255;
  --color-base-outline-button-labels: 22, 32, 65;
  --color-base-accent-1:              #162041;
  --color-base-accent-2:              #3a63ff;

  /* Tokens propios de partials viejos */
  --pi-bg:           var(--bg);
  --pi-fg:           var(--ink);
  --pi-accent:       #3a63ff;
  --pi-soft:         var(--bg-soft);
  --pi-line:         var(--line);
  --pi-thumb-bg:     var(--bg-tint);

  --media-radius:    var(--radius-md);
  --radius:          var(--radius-md);
  --page-width-margin: 0px;
  --safe-bottom-gap: 16px;
  --card-w-mobile:   46vw;
  --card-w-tablet:   32vw;
  --card-w-desktop:  240px;

  --font-body-family:    var(--font-sans);
  --font-body-style:     normal;
  --font-body-weight:    400;
  --font-heading-family: var(--font-sans);
  --font-heading-style:  normal;
  --font-heading-weight: 800;
}