/* ============================================================
   beecoffee — DESIGN TOKENS  (art direction: "Editorial Roastery")
   Palette unchanged: espresso ink · warm paper · orange · honey.
   Everything below is the single source of truth — components
   must not contain magic values.
   ============================================================ */

:root{
  /* ---------- neutral scale (warm espresso → paper), 9 steps ---------- */
  --n-0:#FFFFFF;
  --n-50:#FAF8F4;
  --n-100:#F2EDE4;
  --n-200:#E7DFD2;
  --n-300:#D3C7B5;
  --n-400:#AC9C89;
  --n-500:#7D6E5D;
  --n-600:#5E5345;
  --n-700:#3B3025;
  --n-800:#241C15;
  --n-900:#16110D;
  --n-950:#0F0B08;

  /* ---------- brand accent + semantics ---------- */
  --brand:#EA5B1E;          /* large surfaces, non-text accents */
  --brand-strong:#C9490F;   /* button fills: white text = 4.76:1  */
  --brand-ink:#A73B0B;      /* accent TEXT on light: 6.05:1       */
  --honey:#F6A609;          /* accent on dark: 9.3:1 on ink       */
  --honey-soft:#FFD37A;
  --ok:#1F6D4A;
  --warn:#8A5A05;
  --err:#A32217;

  /* ---------- legacy aliases (markup + inline styles depend on them) ---------- */
  --ink:var(--n-900);
  --ink-2:var(--n-800);
  --ink-3:var(--n-700);
  --ink-soft:var(--n-600);
  --paper:var(--n-50);
  --paper-2:var(--n-100);
  --line:var(--n-200);
  --line-ink:#332A20;
  --white:var(--n-0);
  --orange:var(--brand);
  --orange-dk:var(--brand-ink);
  --crema:var(--honey-soft);

  /* text on dark */
  --on-dark:#F0E8DE;
  --on-dark-soft:#C7B8A6;
  --on-dark-faint:#9A8A78;

  /* ---------- type ---------- */
  --display:'Syne','Hanken Grotesk',system-ui,sans-serif;
  --sans:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --mono:'Space Mono',ui-monospace,'SFMono-Regular',monospace;

  /* modular scale ~1.22, fluid */
  --t-xs:.75rem;
  --t-sm:.875rem;
  --t-base:1.0625rem;                        /* 17px */
  --t-md:clamp(1.125rem,.4vw + 1.05rem,1.25rem);
  --t-lg:clamp(1.25rem,1vw + 1rem,1.5rem);
  --t-xl:clamp(1.5rem,1.6vw + 1.1rem,1.9rem);
  --t-2xl:clamp(1.85rem,2.6vw + 1.1rem,2.6rem);
  --t-3xl:clamp(2.2rem,4vw + 1rem,3.5rem);
  --t-4xl:clamp(2.6rem,7vw + .6rem,5.6rem);

  --lh-tight:1.06;
  --lh-snug:1.24;
  --lh-body:1.62;
  --lh-loose:1.72;
  --measure:65ch;

  /* ---------- space (4px base) ---------- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
  --sp-9:96px; --sp-10:128px;
  --gutter:20px;
  --sec-y:clamp(56px,8vw,112px);
  --stack:clamp(32px,4vw,56px);   /* head → content */
  --maxw:1240px;
  --maxw-narrow:880px;

  /* ---------- shape ---------- */
  --r-1:2px; --r-2:4px; --r-3:8px; --r-pill:999px;
  --r-sm:var(--r-1); --r:var(--r-2); --r-lg:var(--r-2);
  --bw:1px;

  /* ---------- elevation (soft, warm — never black blur) ---------- */
  --sh-1:0 1px 2px rgba(22,17,13,.05);
  --sh-2:0 10px 28px -14px rgba(22,17,13,.20);
  --sh-3:0 34px 70px -28px rgba(22,17,13,.32);
  --sh-sm:var(--sh-1); --sh:var(--sh-2); --sh-lg:var(--sh-3);

  /* ---------- motion ---------- */
  --d-1:150ms; --d-2:250ms; --d-3:400ms;
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-out:cubic-bezier(.2,.8,.2,1);

  /* ---------- z ---------- */
  --z-header:100; --z-fab:150; --z-drawer:200; --z-modal:300;

  /* ---------- one restrained texture, used sparingly ---------- */
  --hex:url("data:image/svg+xml,%3Csvg width='28' height='49' viewBox='0 0 28 49' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23F6A609' stroke-opacity='0.07' stroke-width='1'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM14 0l13 7.5v15M14 0L1 7.5v15M27 16.75L14 24.25M1 16.75l13 7.5M14 49l13-7.5v-15M14 49L1 41.5v-15'/%3E%3C/g%3E%3C/svg%3E");
}

@media (min-width:768px){ :root{ --gutter:32px } }
@media (min-width:1280px){ :root{ --gutter:40px } }