/* =====================================================================
   EASTSIDE BAGEL — DESIGN TOKENS
   Theme: "Cross-Section" — editorial spec-sheet meets bakery.
   Every color, type size, and spacing value used by site.css lives here.
   Downstream pipelines (CMS themes, email templates, print menus) should
   read from this file rather than hard-coding values.
   ===================================================================== */

:root {
  /* ---- Color: the bagel palette -------------------------------------
     flour   page background, warm off-white (not pure white)
     paper   card surface, slightly brighter than flour
     sesame  borders, dividers, tan
     ink     text, warm near-black (never #000)
     crust   PRIMARY action color: baked amber. One per viewport.
     chive   secondary / success: deep green ("holds")
     egg     highlight: yolk yellow ("worth it", underlines, badges)
     lox     error / "spills": deep salmon-red
  ---------------------------------------------------------------------- */
  --flour:        #F6F0E5;
  --flour-2:      #EEE5D5;
  --paper:        #FFFCF6;
  --sesame:       #DACDB7;
  --sesame-2:     #B8A688;
  --ink:          #1B1411;
  --ink-2:        #4B403A;
  --ink-3:        #7B6F65;
  --ink-4:        #A69B90;
  --crust:        #B4501B;
  --crust-hover:  #953F12;
  --crust-soft:   #F4DECC;
  --chive:        #3C5A3A;
  --chive-soft:   #DCE6D5;
  --egg:          #E8B345;
  --egg-soft:     #F8E8C0;
  --lox:          #A93A2B;
  --lox-soft:     #F2D6D0;

  /* Semantic aliases */
  --bg:            var(--flour);
  --bg-alt:        var(--flour-2);
  --surface:       var(--paper);
  --border:        var(--sesame);
  --border-strong: var(--sesame-2);
  --text:          var(--ink);
  --text-muted:    var(--ink-2);
  --text-subtle:   var(--ink-3);
  --primary:       var(--crust);
  --primary-hover: var(--crust-hover);
  --primary-soft:  var(--crust-soft);
  --accent:        var(--egg);
  --accent-soft:   var(--egg-soft);
  --success:       var(--chive);
  --success-soft:  var(--chive-soft);
  --danger:        var(--lox);
  --danger-soft:   var(--lox-soft);
  --focus:         #2E6DB4;

  /* Dark "ink" sections (used for the Grid and drop callouts) */
  --ink-bg:        #1B1411;
  --ink-surface:   #27201B;
  --ink-border:    #3E342D;
  --ink-text:      #F6F0E5;
  --ink-text-muted:#C8BBAA;

  /* ---- Typography ---------------------------------------------------- */
  --font-display: "Fraunces", "Iowan Old Style", "Georgia", serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Fluid type scale (min → max between 360px and 1280px viewports) */
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-xl:   clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  --fs-2xl:  clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  --fs-3xl:  clamp(2.5rem, 1.6rem + 4vw, 4.75rem);

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.6;

  --tracking-caps: 0.12em;

  /* ---- Spacing (4px base) ------------------------------------------- */
  --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;
  --section-pad: clamp(3.5rem, 3rem + 4vw, 7rem);

  /* ---- Layout -------------------------------------------------------- */
  --container: 1200px;
  --container-narrow: 760px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --header-h: 72px;
  --announce-h: 40px;

  /* ---- Shape & elevation -------------------------------------------- */
  --radius-sm: 6px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(27, 20, 17, 0.06), 0 1px 1px rgba(27, 20, 17, 0.04);
  --shadow:    0 8px 24px -8px rgba(27, 20, 17, 0.18), 0 2px 6px rgba(27, 20, 17, 0.06);
  --shadow-lg: 0 24px 48px -16px rgba(27, 20, 17, 0.28);

  /* ---- Motion -------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 220ms;
  --dur-slow: 480ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; --dur-slow: 0ms; }
}