/* ==========================================================================
   Design Tokens — single source of truth for colour, type, spacing, radius

   PALETTE
   Two supplied colours carry the design:
     #659287  sage green   → brand
     #E6F2DD  pale wash    → tinted surfaces
   The other two supplied greens (#88BDA4, #B1D3B9) are kept as secondary
   accents. Every text/background pair below is contrast-checked to WCAG AA
   (4.5:1 normal text, 3:1 large text and UI borders) — see the ratios noted
   against each token. Change a value and re-check before shipping.
   ========================================================================== */

:root {
  /* --- Brand ramp — TEST PALETTE (Update 56, tan/brown) ---------------
     Trial swap from the sage-green palette above/below in git history —
     revert by restoring the 6 lines this block replaces. Original values:
       --c-brand: #659287; --c-brand-deep: #4E7268; --c-brand-dark: #3F5F56;
       --c-brand-soft: #88BDA4; --c-brand-pale: #B1D3B9; --c-brand-tint: #E6F2DD;
     Supplied: B29678, AD7D52, E2D7C4, 857765, 5E4A35 (5 colours for 6
     slots) — the darkest (5E4A35) was moved to -deep rather than -dark
     because -deep carries button/link TEXT and needed real contrast
     (8.4:1 vs ~3.6:1 for the other candidates); -dark is a manual shade
     darker still, for hover/top-bar distinction from -deep. */
  --c-brand:        #B29678;   /* fills, borders — ~2.8:1 on #fff, decorative only */
  --c-brand-deep:   #5E4A35;   /* links, buttons, eyebrows — 8.4:1 on #fff */
  --c-brand-dark:   #4A3928;   /* hover, top bar, dark bands */
  --c-brand-soft:   #AD7D52;   /* secondary accent */
  --c-brand-pale:   #857765;   /* tints, icon accents on dark */
  --c-brand-tint:   #E2D7C4;   /* pale wash */

  /* --- Accents ------------------------------------------------------- */
  /* Five muted hues that harmonise with the green rather than competing.
     Used ONLY where the content is genuinely categorical — product type,
     blog category, delivery speed — so colour encodes meaning instead of
     decorating. Lightness was solved for the contrast target, not picked
     by eye: -deep clears 4.5:1 on white AND carries white text at 4.5:1,
     -mid clears 3:1 for graphics, -tint carries --c-ink at >12:1. */
  --a-amber:        #C18B2D;  --a-amber-deep:      #9A6E24;  --a-amber-tint:      #F4EFE6;
  --a-terracotta:   #D37F66;  --a-terracotta-deep: #C05738;  --a-terracotta-tint: #F3EAE7;
  --a-plum:         #C2829D;  --a-plum-deep:       #AF5C7F;  --a-plum-tint:       #F1E9ED;
  --a-indigo:       #7497C6;  --a-indigo-deep:     #4A78B5;  --a-indigo-tint:     #E9EDF2;
  --a-teal:         #38A2B3;  --a-teal-deep:       #2D818E;  --a-teal-tint:       #E7F1F3;

  /* --- Neutrals (green-cast, so they sit with the brand) -------------- */
  --c-ink:          #1B2B26;   /* headings — 14.79:1 on #fff */
  --c-body:         #4A5A55;   /* body copy — 7.28:1 on #fff */
  --c-muted:        #5C6D67;   /* secondary text — 5.47:1 on #fff */
  --c-line:         #F0EAE4;   /* decorative dividers, card edges — warm-tinted for the test palette */
  --c-line-strong:  #AD7D52;   /* form-control borders — 3.6:1, meets 1.4.11 */
  --c-surface:      #FFFFFF;
  --c-surface-alt:  var(--c-brand-tint);

  /* --- Dark bands (sections that invert on --c-ink) ------------------- */
  --c-ink-panel:    #223530;   /* card sitting on --c-ink */

  /* --- On-dark text (footer, top bar) -------------------------------- */
  --c-on-dark:      #DCEBE3;   /* 5.71:1 on --c-brand-dark */
  --c-on-dark-soft: #C6D8CF;   /* 9.95:1 on --c-ink */
  --c-on-dark-dim:  #9BAFA5;   /* 6.39:1 on --c-ink — footer fine print */

  /* --- Status -------------------------------------------------------- */
  --c-success:      #276B4E;   /* 6.36:1 on #fff */
  --c-success-bg:   #E4F2EA;
  --c-warning:      #8F6314;   /* 5.30:1 on #fff */
  --c-warning-bg:   #F7EEDC;
  --c-danger:       #B3392B;   /* 5.94:1 on #fff */
  --c-danger-bg:    #FBEAE7;

  /* --- Typography ---------------------------------------------------- */
  /* Outfit is a variable font — one file, every weight. See fonts.css. */
  --font-head: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-xs:    0.75rem;   /* 12px */
  --fs-sm:    0.875rem;  /* 14px */
  --fs-base:  1rem;      /* 16px */
  --fs-lg:    1.125rem;  /* 18px */
  --fs-xl:    1.375rem;  /* 22px */
  --fs-2xl:   1.75rem;   /* 28px */
  --fs-3xl:   2.25rem;   /* 36px */
  --fs-4xl:   3rem;      /* 48px */

  --lh-tight: 1.2;
  --lh-base:  1.65;

  /* Outfit runs slightly wide and open; a touch of negative tracking on
     headings keeps large type from feeling loose. */
  --ls-head: -0.02em;

  /* --- Spacing scale -------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* --- Layout --------------------------------------------------------- */
  --container:      1200px;
  --container-wide: 1400px;
  --gutter:         1rem;
  --header-h:       80px;
  --topbar-h:       44px;

  /* --- Top bar (swap these to flip the bar light/dark) --- */
  --c-topbar-bg:    var(--c-brand-dark);
  --c-topbar-text:  var(--c-on-dark);
  --c-topbar-hover: #ffffff;
  --c-topbar-icon:  var(--c-brand-pale);        /* 4.32:1 on the bar */
  --c-topbar-line:  rgba(255, 255, 255, 0.20);
  --c-topbar-field: rgba(255, 255, 255, 0.08);

  /* --- Radius / shadow / motion --------------------------------------- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* Shadows tinted with the brand green rather than neutral black — keeps
     elevation from looking grey against the tinted surfaces. */
  --shadow-sm: 0 1px 2px rgba(27, 43, 38, 0.06);
  --shadow-md: 0 4px 16px rgba(27, 43, 38, 0.10);
  --shadow-lg: 0 12px 40px rgba(27, 43, 38, 0.14);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 0.25s;

  /* --- z-index scale --------------------------------------------------- */
  --z-header: 100;
  --z-drawer: 200;
  --z-modal:  300;
  --z-toast:  400;
}