/* ============================================================================
   Atlantic Moulding — shared token layer
   <link rel="stylesheet" href="<rel>/shared/_tokens.css"> on EVERY page,
   before _shell.css / the page's inline <style>. Palette values mirror
   _shell.css + theme.js so nothing shifts when this lands.
   ============================================================================ */
:root{
  /* ── Palette (unchanged) ─────────────────────────────────────────────── */
  --dark-wood:#1E1208; --mid-wood:#3A2415; --warm-oak:#6B4C2E;
  --pale-wood:#EDE3CE; --pale-wood-light:#F4EDD8; --pale-wood-mid:#E8DBCA;
  --green:#7A9A3A; --green-hover:#8FAF45; --green-dark:#5C7A25;
  --white:#FDFAF4; --text-body:#221408; --text-muted:#7A6A50;
  --border-warm:rgba(90,60,20,0.13); --border-strong:rgba(90,60,20,0.25);
  --sale-red:#B83A2A;
  --shadow-sm:0 1px 3px rgba(30,18,8,.06);
  --shadow-md:0 6px 24px rgba(30,18,8,.10);
  --radius:2px;

  /* ── Breakpoints (reference only — @media can't read vars; use literals)
     phone   <  600px   single column, drawer nav, sheets, cards
     tablet  600–899px  2-col forms, drawer nav, sheets
     desktop 900–1199px sidebar returns, tables return, centred modals
     wide    ≥ 1200px   full top nav (scrolls internally until 1480)      */
  --bp-tablet:600px; --bp-desktop:900px; --bp-wide:1200px; --bp-max:1480px;

  /* ── Type — mobile-first values; desktop overrides below ─────────────── */
  --font-sans:'DM Sans',sans-serif;
  --font-mono:ui-monospace,Menlo,monospace;
  --fs-label:11px;    /* uppercase eyebrow / field label, ls .16em, 500 */
  --fs-small:13px;    /* meta, helper text, table cells on desktop      */
  --fs-body:16px;     /* body + ALL inputs on phone (prevents iOS zoom) */
  --fs-lead:18px;     /* card titles, customer names                    */
  --fs-title:22px;    /* section / sheet titles                         */
  --fs-display:28px;  /* page h1                                        */
  --fw-light:300; --fw-regular:400; --fw-medium:500;
  --lh-tight:1.2; --lh-body:1.5;
  --ls-label:.16em; --ls-button:.12em; --ls-eyebrow:.22em;

  /* ── Spacing ─────────────────────────────────────────────────────────── */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px;
  --gutter:var(--sp-4);              /* page side padding on phone */

  /* ── Touch + controls ────────────────────────────────────────────────── */
  --tap-min:44px;                    /* any tappable thing, both axes   */
  --control-h:48px;                  /* inputs, selects, chips-in-forms */
  --control-h-lg:52px;               /* primary actions, list rows      */

  /* ── Icons (Lucide, stroke icons) ────────────────────────────────────── */
  --icon-sm:16px; --icon-md:20px; --icon-lg:24px; --icon-stroke:1.75;

  /* ── Interactive state tokens ────────────────────────────────────────── */
  /* Design review proposed --green-dark (#5C7A25, 4.7:1 on cream) for solid
     button fills. That is a brand-visible change: it stays OPTED OUT
     (--green, today's fill) until Nicholas signs off. Flip the next line to
     var(--green-dark) to adopt it site-wide. */
  --primary:var(--green);
  --primary-hover:var(--green-hover);  /* today's hover; becomes var(--green) once --primary is --green-dark */
  --primary-press:#4A6420;
  --on-primary:var(--white);
  --tint-hover:rgba(122,154,58,.08); /* ghost / outline hover           */
  --tint-press:rgba(122,154,58,.14);
  --tint-selected:rgba(122,154,58,.08);
  --border-selected:var(--green);
  --surface-press:var(--pale-wood);  /* cards / rows on :active         */
  --focus-ring:0 0 0 3px rgba(122,154,58,.35);
  --danger:var(--sale-red); --danger-hover:#CA4334; --danger-tint:rgba(184,58,42,.08);
  --disabled-opacity:.45;
  --scrim:rgba(30,18,8,.5);
  --radius-sheet:14px;               /* ONLY sheet top corners + pills  */
  --z-header:50; --z-sheet:500; --z-toast:9999;
}

@media (min-width:900px){
  :root{
    --fs-label:10px; --fs-small:12px; --fs-body:14px;
    --fs-lead:16px; --fs-title:20px; --fs-display:26px;
    --gutter:var(--sp-6);
  }
}

/* Dark mode — only the NEW tokens; palette flips stay in theme.js */
:root[data-theme="dark"]{
  --primary:#7A9A3A; --primary-hover:#8FB148; --primary-press:#5C7A25;
  --on-primary:#12090A;
  --tint-hover:rgba(143,177,72,.10); --tint-press:rgba(143,177,72,.18);
  --tint-selected:rgba(143,177,72,.12);
  --surface-press:#2C1D11;
  --focus-ring:0 0 0 3px rgba(163,195,90,.45);
  --scrim:rgba(0,0,0,.7);
}