/* ============================================================
   NOURISH — Design Tokens (colors + type + spacing)
   Editorial food-wellness brand. "Nourish" is a generic working
   name for the blog/product — NOT the company name. The real
   advertiser identity (legal name, address, contact, tax id)
   is injected at deploy via [data-co] markers in the footer,
   contact page, and legal pages.

   Palette is informed by the food: warm paper neutrals (cream → ink),
   a fresh herb/olive green as the trust primary, a warm tomato/paprika
   terracotta as the action accent (CTAs only), and gold for stars/badges.
   Load this file first, then site.css.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* ---------- WARM NEUTRALS (paper → ink) ---------- */
  --cream-50:  #FBF8F2;   /* page background — warm paper */
  --cream-100: #F4EEE2;   /* raised surface / tint */
  --sand-200:  #EAE1D1;   /* hairline borders, dividers */
  --sand-300:  #D8CDB9;   /* stronger borders */
  --stone-400: #B4A992;   /* disabled, faint text on light */
  --stone-500: #877E6C;   /* subtle/meta text */
  --ink-600:   #5A625C;   /* secondary text */
  --ink-700:   #39413C;   /* strong secondary */
  --ink-800:   #232B27;   /* headings on light */
  --ink-900:   #161C19;   /* primary body text */

  /* ---------- PRIMARY — fresh herb / olive green (calm, trust, fresh) ---------- */
  --green-50:  #E9F2ED;
  --green-100: #D2E6DC;
  --green-200: #A9CDBE;
  --green-300: #79B19D;
  --green-400: #4C8F79;
  --green-500: #2F7263;   /* PRIMARY */
  --green-600: #245A4E;
  --green-700: #1B453B;
  --green-800: #14332C;

  /* ---------- ACCENT — warm tomato / paprika / terracotta (CTAs, appetite) ---------- */
  --clay-50:   #FBEEE7;
  --clay-100:  #F6D9C8;
  --clay-200:  #EFBFA4;
  --clay-300:  #E6A07C;
  --clay-400:  #DE855C;
  --clay-500:  #D26B43;   /* ACCENT / primary CTA */
  --clay-600:  #B85534;
  --clay-700:  #95432A;

  /* ---------- HIGHLIGHT — warm gold (stars, badges, small accents) ---------- */
  --gold-300:  #ECC777;
  --gold-400:  #E0A93F;
  --gold-500:  #C68C28;

  /* ---------- SEMANTIC HUES ---------- */
  --success: #2F7263;
  --warning: #C68C28;
  --error:   #B5452F;
  --info:    #3C6E7C;

  /* ============================================================
     SEMANTIC TOKENS — prefer these in components
     ============================================================ */
  --bg:            var(--cream-50);
  --bg-tint:       var(--cream-100);
  --surface:       #FFFFFF;
  --surface-sunk:  var(--cream-100);
  --border:        var(--sand-200);
  --border-strong: var(--sand-300);

  --text:          var(--ink-900);
  --text-secondary:var(--ink-600);
  --text-muted:    var(--stone-500);
  --text-ondark:   var(--cream-50);
  --text-ondark-muted: #B9C7BF;

  --primary:        var(--green-500);
  --primary-hover:  var(--green-600);
  --primary-press:  var(--green-700);
  --primary-tint:   var(--green-50);
  --on-primary:     #FBF8F2;

  --accent:         var(--clay-500);
  --accent-hover:   var(--clay-600);
  --accent-press:   var(--clay-700);
  --accent-tint:    var(--clay-50);
  --on-accent:      #FFFFFF;

  --focus-ring:     color-mix(in oklch, var(--green-500) 55%, transparent);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans:    "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* ---------- TYPE SCALE (base 18px for legibility) ---------- */
  --text-xs:   0.778rem;  /* 14px */
  --text-sm:   0.889rem;  /* 16px */
  --text-base: 1rem;      /* 18px */
  --text-md:   1.111rem;  /* 20px */
  --text-lg:   1.333rem;  /* 24px */
  --text-xl:   1.667rem;  /* 30px */
  --text-2xl:  2.111rem;  /* 38px */
  --text-3xl:  2.667rem;  /* 48px */
  --text-4xl:  3.556rem;  /* 64px */
  --text-5xl:  4.444rem;  /* 80px */

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;   /* body copy — generous for readability */

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;  /* eyebrow / overline labels */

  /* ---------- SPACING (4px base) ---------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;

  /* ---------- RADII ---------- */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* ---------- SHADOWS (warm-tinted, soft) ---------- */
  --shadow-xs: 0 1px 2px rgba(58, 42, 24, 0.06);
  --shadow-sm: 0 2px 6px rgba(58, 42, 24, 0.07), 0 1px 2px rgba(58, 42, 24, 0.05);
  --shadow-md: 0 8px 20px rgba(45, 38, 24, 0.09), 0 2px 6px rgba(45, 38, 24, 0.05);
  --shadow-lg: 0 20px 44px rgba(40, 34, 20, 0.12), 0 6px 14px rgba(40, 34, 20, 0.06);
  --shadow-focus: 0 0 0 3px var(--focus-ring);

  /* ---------- MOTION ---------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   400ms;

  /* ---------- LAYOUT ---------- */
  --maxw-prose:  68ch;     /* article measure */
  --maxw-content: 1180px;  /* page container */
}