/* ============================================================
   Humart Design System — colors + type tokens
   Source of truth for the brand. Import as a single file.
   ============================================================ */

/* ---------- Fonts (Google Fonts CDN) -----------------------
   - Merriweather (serif): brand titles, product names, editorial copy.
   - Inter (sans): UI, buttons, prices, badges, microcopy.
   If you self-host, drop ttfs into ./fonts/ and replace the @import.
*/
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700;900&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* =========================================================
     COLORS — semantic, functional, not decorative.
     "Si un color no aporta significado funcional al usuario,
      no se usa. Los colores son lenguaje, no decoración."
     ========================================================= */

  /* — Brand / structure ——————————————————————————— */
  --navy:            #162041;   /* dominant brand color */
  --navy-900:        #0e1530;   /* hover/press, deeper structure */
  --navy-700:        #1e2c54;   /* secondary structure */
  --navy-100:        #e7eaf2;   /* navy tint for hairlines */
  --ink:             #162041;   /* default heading color (=navy) */

  /* — Trust / confirmation (mint) ———————————————————
     USE FOR: free shipping checks, warranty, "pago seguro",
     in-stock indicators, success states. NEVER decoration. */
  --mint:            #2ECC8F;
  --mint-700:        #21a572;   /* hover for mint pills/icons */
  --mint-50:         #e8f9f1;   /* success background */

  /* — Urgency / savings (coral) ————————————————————
     USE FOR: strike-through price, "-38%" discount badge,
     "Stock bajo", countdown, "Más vendido", alerts. NEVER decoration. */
  --coral:           #FF6B6B;
  --coral-700:       #e0494a;   /* press state */
  --coral-50:        #fff1f1;   /* alert background */

  /* — Neutrals (UI scaffolding) ————————————————————— */
  --bg:              #ffffff;
  --bg-soft:         #f6f7fb;   /* page section alt bg */
  --bg-tint:         #f1f3fa;   /* card placeholder bg */
  --line:            #e4e7f0;   /* default border */
  --line-strong:     #cbd1de;   /* input border on focus-within */

  /* — Text ——————————————————————————————————————————— */
  --fg:              #162041;   /* primary text */
  --fg-2:            #4a5670;   /* secondary text, body */
  --fg-3:            #7e879c;   /* tertiary, captions */
  --fg-muted:        #a2aabb;   /* disabled / very light */
  --on-navy:         #ffffff;   /* text on navy surfaces */
  --on-navy-2:       rgba(255,255,255,0.72);

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

  /* — Payment / carrier accent (used in their own brand colors,
        never re-themed). Keep as reference. */
  --pay-bizum:       #4ec3e0;
  --pay-visa:        #1a1f71;
  --pay-mastercard:  #eb001b;
  --pay-klarna:      #ffa8c5;
  --pay-paypal:      #003087;

  /* =========================================================
     TYPOGRAPHY
     ========================================================= */
  --font-serif:      'Merriweather', Georgia, 'Times New Roman', serif;
  --font-sans:       'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:       ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Base size — mobile-first 16px */
  --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;  /* @kind other */
  --lh-snug:         1.3;   /* @kind other */
  --lh-normal:       1.55;  /* @kind other */
  --lh-loose:        1.75;  /* @kind other */

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;   /* eyebrows, uppercase labels */

  /* =========================================================
     SPACING / RADII / SHADOWS / MOTION
     ========================================================= */
  --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;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;    /* cards default */
  --radius-lg: 12px;   /* hero / large cards */
  --radius-xl: 18px;   /* image cards / picture frames */
  --radius-pill: 999px;

  --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);

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

  /* Layout */
  --page-width:    1200px;
  --page-pad:      20px;     /* mobile gutter */
  --tap:           44px;     /* min hit target (mobile-first) */
}

/* =============================================================
   Semantic type roles — apply via class or use the vars in CSS.
   ============================================================= */
.h-display {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(36px, 6vw, 56px);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  text-wrap: balance;
}
.h1 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(28px, 4.4vw, 40px);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  text-wrap: balance;
}
.h2 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(22px, 3.2vw, 28px);
  line-height: var(--lh-snug);
  color: var(--ink);
  text-wrap: balance;
}
.h3 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 18px;
  line-height: var(--lh-snug);
  color: var(--ink);
}
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-3);
}
.body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}
.body-sm {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}
.caption {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-12);
  line-height: var(--lh-snug);
  color: var(--fg-3);
}
.ui-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-13);
  letter-spacing: 0.02em;
  color: var(--fg);
}
.price {
  font-family: var(--font-sans);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.price-old {
  font-family: var(--font-sans);
  font-weight: 500;
  text-decoration: line-through;
  color: var(--fg-muted);
}
.price-now {
  font-family: var(--font-sans);
  font-weight: 800;
  color: var(--coral);  /* discounted current price uses coral */
}

/* Sensible defaults if you only import this stylesheet */
html { font-family: var(--font-sans); color: var(--fg); background: var(--bg); }
body { margin: 0; }
h1, h2, h3, h4 { font-family: var(--font-serif); color: var(--ink); margin: 0; }
p { margin: 0; color: var(--fg-2); line-height: var(--lh-normal); }
a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--navy-900); }
button { font-family: var(--font-sans); }