/* masa — Noche design tokens (supersedes Azul blue-corn values, ruling Jul 10 2026;
   file name kept so every page inherits). CTA = flat mango chip with navy text (the Clay
   rule: one acid chip per view, dark text on it, no glow). Contrast-audited WCAG AA.
   See masa-design-language.md supersede note.

   ⚑ DARK-FIRST (skin pass, Jul 17 2026 — the flask/r7 direction in masa's OWN colors).
   Juan chose the dark direction (r6/r7 study, masa-as-flask-exact.html); the strategic
   counter (dark-glassy has converged; masa's warmth differentiates) was answered by
   keeping the NIGHT ground NAVY + mango, never flask's neutral #191919 — "a dark nobody
   else has". So :root is now the night theme for every visitor; light survives behind
   the toggle ([data-theme="light"]), no longer follows the OS. The night value set is
   the SAME Noche dark theme this file always had — the flip is default order, not color.

   Material system (measured off apple.com + flask.do, Jul 17 — see the r7 study header):
   - hairline: UNIFORM 1px, warm cream-tint, all four sides. (The lighter-top-edge
     "Apple line" was flask's invention — retracted Jul 17; do not re-add.)
   - glass: on CHROME only (the sticky bar), ONE backdrop-filter layer, 20px. Content
     surfaces use plain translucent fills. iOS Safari drops layers past ~3 silently —
     the r6 lesson (9 layers → the page's money moment vanished on Juan's iPhone).
   - lift: one large soft shadow for elevated surfaces (site-only; portal/kitchen stay
     flat per the --clay ruling).
   ⚑ CLAY RULE SUPERSEDED for the flask skin (Juan, Jul 17 2026 late, via question flow;
     logged in masa-design-language.md same session): the CTA is now the study's LIGHT-
     GRADIENT button (#cfdef6→#fafafa, dark text, layered shadow), not the flat mango chip.
     Mango #92DCE5 survives as the SINGLE accent for small warm moments (dots, hand-script,
     selection) — never as the button fill. Periwinkle/teal/gold/morado are retired from
     the dark theme; the light theme behind the toggle is untouched. */
:root{
  /* ground + ink — night, GRAY FLASK SYSTEM (Juan's go-ahead Jul 17 late: the study's skin
     goes site-wide; navy retired from dark. Values = the measured flask ground hierarchy
     with masa's mango chip. Light theme untouched behind the toggle.) */
  /* ⚑ FLASK SURFACE MODEL (s5d, Juan Jul 17 — "use flask's lighter-gray look, nothing darker
     than the charcoal ground; and stop the liquid-glass transparency"). Measured on flask.do:
     the ground is the DARKEST and every raised surface is LIGHTER (never a sunk darker-than-
     ground). So: panel is now a SOLID raised gray (was rgba(44,44,44,.45) translucent — the
     transparency Juan flagged), and --sunk (pills/chips/recessed like the "start here" pill,
     form selects, mock fills) flips from #0D0D0D (darker than ground) to a LIGHTER raised gray. */
  --g:#191919; --panel:#232323; --sunk:#2A2A2A; --element:#2C2C2C;
  --line:rgba(250,250,250,.14); /* uniform warm hairline (Apple rule) */
  --ink:#FAFAFA; --soft:#A1A1AA; --select:#92DCE5;
  --indigo:#FAFAFA; --indigo-d:#E4E4E7; --cream:#191919;
  --chip:#92DCE5; --chip-d:#6EC1CE; --onchip:#191919;
  /* --product-action: see note below the light block — unused on purpose */
  --product-action:#92DCE5;
  --dough:#3F3F3F; --dough-eye:#FAFAFA;
  --gold:#A1A1AA; --coral:#92DCE5; --teal:#A1A1AA; --teal-d:#A1A1AA;
  --chip-ink:#92DCE5; --peri-ink:#FAFAFA;
  --k-indigo:#92DCE5; --k-gold:#92DCE5; --k-teal:#92DCE5; --k-coral:#92DCE5; --k-morado:#92DCE5;
  --glass:rgba(25,25,25,.72);
  --lift:0 25px 50px -12px rgba(0,0,0,.5);
  --lift-sm:0 12px 28px -12px rgba(0,0,0,.45);
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-spring:cubic-bezier(.34,1.38,.5,1);
  --t-micro:150ms; --t-reveal:460ms;
  --r-card:12px; --r-sm:10px; --r-pill:999px;
  --r-dough:62% 38% 55% 45% / 58% 52% 48% 42%;
  /* ⚑ TYPE SYSTEM (skin pass Jul 17 2026 — the piece the color-only flip missed, which is
     why the pages still read "old": Helvetica-800 heavy vs the skin's lighter grotesk).
     Body = Outfit, display = Cal Sans (Juan's pick). Tokenized so EVERY page inherits one
     system — the inline-style pages read these too. */
  --f-body:"Outfit",ui-sans-serif,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --f-disp:"CalSans",ui-sans-serif,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --f-mono:ui-monospace,"SF Mono",Menlo,monospace;
  /* ⚑ MOCK UI FONT (s5d, Juan — "the mock font should be closest to the Apple font, like flask").
     flask uses the plain SYSTEM STACK, which resolves to SF Pro on iPhone/Mac (the real Apple
     font, zero copyright). So the phone-frame + device mocks render their UI in the OS's own font,
     making them read as genuine iOS. Never used for masa's own brand copy — that stays Outfit/Cal Sans. */
  --f-ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro",system-ui,ui-sans-serif,sans-serif;

  /* ⚑ SPACING SYSTEM (Juan, Jul 17 s5 — "do we have standardized spacing rules? make it
     consistent, polished, minimalist"). Researched Jul 17: the 8-point grid is the standard
     for low-density marketing sites (4pt sub-grid for component internals). One scale, every
     page inherits it. Section rhythm uses --sp-section (the big vertical beat between major
     sections) so the whole site breathes on one cadence instead of the old 74/82/84/46/38/34
     grab-bag. Component internals may still use the 4pt steps below; only the RHYTHM is
     unified here to keep the change low-risk. */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --sp-7:40px; --sp-8:48px; --sp-9:64px; --sp-10:80px; --sp-11:96px;
  --sp-section:80px;   /* major section vertical beat (desktop) */
  --sp-section-sm:56px;/* same beat, tightened for phones */
}

:root[data-theme="light"]{
  --g:#FFFFFF; --panel:#F2F4FD; --sunk:#E8ECFB; --line:#DBE1F4;
  --ink:#0A1045; --soft:#3D4368; --select:#0A1045;
  --indigo:#0A1045; --indigo-d:#060A2E; --cream:#F5EFDD;
  --chip:#FF8E3C; --chip-d:#6EC1CE; --onchip:#0A1045;
  --dough:#4A5FB8; --dough-eye:#F5EFDD; --chip-ink:#CC5F05; --peri-ink:#4A5FB8;
  --gold:#A56A15; --coral:#C4572F; --teal:#0F8B8D; --teal-d:#0A6B6E;
  --k-indigo:#0A1045; --k-gold:#A56A15; --k-teal:#0A6B6E; --k-coral:#C4572F; --k-morado:#6A3E74;
  --glass:rgba(255,255,255,.72);
  --lift:0 25px 50px -18px rgba(10,16,69,.18);
  --lift-sm:0 12px 28px -14px rgba(10,16,69,.14);
}

/* explicit dark via the toggle — identical to :root; exists so the pre-paint script can
   stamp either value and the toggle round-trips cleanly */
:root[data-theme="dark"]{
  --g:#191919; --panel:#232323; --sunk:#2A2A2A; --element:#2C2C2C;
  --line:rgba(250,250,250,.14);
  --ink:#FAFAFA; --soft:#A1A1AA; --select:#92DCE5;
  --indigo:#FAFAFA; --indigo-d:#E4E4E7; --cream:#191919;
  --chip:#92DCE5; --chip-d:#6EC1CE; --onchip:#191919;
  --dough:#3F3F3F; --dough-eye:#FAFAFA;
  --gold:#A1A1AA; --coral:#92DCE5; --teal:#A1A1AA; --teal-d:#A1A1AA;
  --chip-ink:#92DCE5; --peri-ink:#FAFAFA;
  --k-indigo:#92DCE5; --k-gold:#92DCE5; --k-teal:#92DCE5; --k-coral:#92DCE5; --k-morado:#92DCE5;
  --glass:rgba(25,25,25,.72);
  --lift:0 25px 50px -12px rgba(0,0,0,.5);
  --lift-sm:0 12px 28px -12px rgba(0,0,0,.45);
}