/* ───────────────────────────────────────────────────────────────
   nanay · Design Tokens
   ───────────────────────────────────────────────────────────────
   Productos textiles artesanales en lana de Patagonia chilena.
   Siempre en minúscula. Calor, maternidad, hecho a mano.
   ─────────────────────────────────────────────────────────────── */

/* Fonts — see /fonts/README.md for substitution notes.
   Wordmark "nanay" is delivered as PNG (see assets/logos/) — there is
   no licensed font to set it in. Body type uses two Google families. */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Outfit:wght@300;400;500;600;700&family=Lora:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root {
  /* ─────────── Brand palette (from logo + label) ─────────── */
  --nanay-burgundy:    #3a0505;   /* deep cherry-brown — wordmark "ink" */
  --nanay-burgundy-80: #5a1a1a;
  --nanay-burgundy-60: #7a3a36;

  --nanay-mustard:     #cebf0f;   /* ochre / olive-mustard — primary accent */
  --nanay-mustard-80:  #b8aa0e;
  --nanay-mustard-20:  #f0ecc0;

  --nanay-pistachio:   #e3e8d1;   /* pale sage cream — soft surface */
  --nanay-pistachio-deep: #c5cdab;

  --nanay-cream:       #f5efe2;   /* warm off-white — page background */
  --nanay-cream-deep:  #ece4d2;
  --nanay-canvas:      #ebe2cc;   /* embroidered-label canvas tone */

  --nanay-ink:         #1f1612;   /* near-black warm brown — body type */
  --nanay-ink-soft:    #4a3a32;

  /* ─────────── Product yarn palette (sampled from photos) ─────────── */
  /* These match the actual wool colors the brand uses. */
  --yarn-crema:        #e6d6b5;   /* natural undyed cream wool */
  --yarn-terracota:    #9e432e;   /* warm clay / paprika */
  --yarn-mostaza:      #b88420;   /* honey ochre */
  --yarn-verdeagua:    #2b6f72;   /* deep teal water-green */
  --yarn-griscarbon:   #2e2d2b;   /* charcoal */

  /* ─────────── Semantic tokens ─────────── */
  --bg:           var(--nanay-cream);
  --bg-elevated:  #fbf7ec;
  --bg-inverted:  var(--nanay-burgundy);
  --bg-accent:    var(--nanay-pistachio);

  --fg1:          var(--nanay-ink);          /* primary body */
  --fg2:          var(--nanay-ink-soft);     /* secondary body */
  --fg3:          #7a6a5e;                   /* tertiary / meta */
  --fg-on-dark:   var(--nanay-cream);
  --fg-accent:    var(--nanay-burgundy);     /* link / emphasis */

  --line:         #d8cdb6;                   /* hairline rule */
  --line-strong:  var(--nanay-burgundy);

  --focus:        var(--nanay-mustard);

  /* ─────────── Typography ─────────── */
  --font-display: "DM Serif Display", "Cormorant Garamond", Georgia, serif;
  --font-sans:    "Outfit", -apple-system, "Helvetica Neue", system-ui, sans-serif;
  --font-serif:   "Lora", Georgia, "Times New Roman", serif;
  --font-wordmark: var(--font-display);  /* fallback only — use PNG when possible */

  /* Type scale — fluid, hospitality-grade. Floor 16, never below 14. */
  --fs-xs:    0.8125rem;    /* 13 — micro labels only */
  --fs-sm:    0.9375rem;    /* 15 — captions, meta */
  --fs-base:  1.0625rem;    /* 17 — body */
  --fs-md:    1.1875rem;    /* 19 — lede */
  --fs-lg:    1.5rem;       /* 24 — h4 */
  --fs-xl:    2rem;         /* 32 — h3 */
  --fs-2xl:   2.75rem;      /* 44 — h2 */
  --fs-3xl:   4rem;         /* 64 — h1 */
  --fs-display: 6rem;       /* 96 — hero display */

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  --tracking-tight: -0.02em;
  --tracking-norm:  0;
  --tracking-wide:  0.08em;
  --tracking-mega:  0.18em;   /* for ALL-CAPS micro labels */

  /* ─────────── Spacing scale ─────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ─────────── Radii ─────────── */
  /* The brand prefers SOFT but not pillowy corners — textile feel, not app feel. */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ─────────── Shadows ─────────── */
  /* Warm-tinted shadows — never neutral grey. Soft, diffuse, hand-placed feel. */
  --shadow-1: 0 1px 2px rgba(58, 5, 5, 0.06);
  --shadow-2: 0 4px 16px -4px rgba(58, 5, 5, 0.10), 0 1px 2px rgba(58, 5, 5, 0.05);
  --shadow-3: 0 18px 40px -16px rgba(58, 5, 5, 0.18), 0 2px 6px rgba(58, 5, 5, 0.06);
  --shadow-lifted: 0 30px 60px -24px rgba(58, 5, 5, 0.28);

  /* ─────────── Motion ─────────── */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);   /* gentle settle */
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  140ms;
  --dur-base:  280ms;
  --dur-slow:  520ms;
}

/* ─────────── Semantic element styles ─────────── */
html, body {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
  margin: 0;
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
  margin: 0;
  text-wrap: balance;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg1);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
  margin: 0;
}
p, .body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--fg1);
  text-wrap: pretty;
}
.lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--fg2);
}
.meta, .caption {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-sm);
  color: var(--fg3);
  line-height: var(--lh-normal);
}
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mega);
  color: var(--fg-accent);
}

a {
  color: var(--fg-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: opacity var(--dur-fast) var(--ease-soft);
}
a:hover { opacity: 0.7; }

::selection { background: var(--nanay-mustard-20); color: var(--nanay-burgundy); }