/* tokens.css: Nowhere Bakery design tokens (variables.css verbatim)
   Source of truth: DESIGN_SYSTEM.md. Do not add values here that are not documented there. */

:root{
  /* ---- color: sky ---- */
  --sky-high:#2F7DC6;
  --sky-mid:#5AA9E6;
  --sky-low:#A9DCF7;

  /* ---- color: land ---- */
  --hill-far:#7CC24A;
  --hill-mid:#5FA92F;
  --hill-near:#3E7A1E;

  /* ---- color: paper + signage ---- */
  --cloud:#FFFFFF;
  --cream:#FBF3E2;
  --paper:#F5E7CC;
  --red:#CC3B26;
  --red-deep:#8E2415;
  --sun:#F6C544;
  --ink:#3A2317;
  --ink-soft:#6B4A34;

  /* ---- color: product ---- */
  --choc:#5B3A22;
  --brownie:#3C2317;
  --blondie:#C8944B;   /* text on this surface must be --ink */

  /* ---- type ---- */
  --font-display:'Lilita One','Arial Black',system-ui,sans-serif;
  --font-body:'Nunito',ui-rounded,'Segoe UI',system-ui,sans-serif;
  --font-script:'Pacifico','Brush Script MT',cursive;

  --t-caption:0.8rem;
  --t-body-sm:0.88rem;
  --t-body:clamp(1rem,1.05vw,1.125rem);
  --t-lede:clamp(1.05rem,1.6vw,1.25rem);
  --t-kicker:clamp(1.1rem,2.4vw,1.7rem);
  --t-h3:1.25rem;
  --t-h2-sm:clamp(1.6rem,3.4vw,2.4rem);
  --t-display:clamp(2rem,5.6vw,4rem);
  --t-sign:clamp(2.1rem,7.4vw,6.4rem);

  /* ---- space (4px base) ---- */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
  --section-y:clamp(3.5rem,8vw,7rem);

  /* ---- shape ---- */
  --r-card:14px;
  --r-pill:999px;
  --edge:3px solid var(--ink);
  --shadow-flat:0 6px 0 rgba(58,35,23,.18);

  /* ---- layout ---- */
  --max:1180px;
  --gutter:clamp(1.25rem,5vw,3rem);
  --measure:56ch;
}

/* This brand is a sunny day in every theme. Keep the canvas tokens stable. */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --cream:#FBF3E2; --paper:#F5E7CC; } }
:root[data-theme="dark"]{ --cream:#FBF3E2; --paper:#F5E7CC; }

/* Safe-area insets at :root, per PAGE_ARCHITECTURE §5. Layout plumbing, not a design value. */
:root{
  --sa-top:env(safe-area-inset-top,0px);
  --sa-right:env(safe-area-inset-right,0px);
  --sa-bottom:env(safe-area-inset-bottom,0px);
  --sa-left:env(safe-area-inset-left,0px);
}