/* ============================================================================
   tokens.css — the design system, defined ONCE.
   Every view and shell piece reads these variables. No screen re-declares a
   color, font, or radius. Change the brand here → every screen moves.
   Values are the locked MamaBrain design tokens (Engineering Handoff Kit).
   ============================================================================ */
:root{
  /* surfaces */
  --ink:#0A0F0C;        /* app background */
  --forest:#161C17;     /* cards */
  --raised:#1E2620;     /* inputs / chips */
  --border:#2A332D;     /* hairlines */
  --line:#202821;       /* faint internal dividers */

  /* brand signal — Glowing Pistachio (the one bright thing per screen) */
  --green:#BFE89A;      /* primary signal */
  --citron:#C2F56B;     /* bright accent */
  --soft:#9DC97F;       /* progress / secondary signal */

  /* ── text ladder ──────────────────────────────────────────────────────────
     BRIGHTENED 2026-08-03 (universal secondary-copy pass). Measured, not eyeballed:
     against every surface the app actually paints on (--ink #0A0F0C, --forest
     #161C17 / #141A15, --raised #1E2620) the old ladder read

       cream 16.52 / 14.81 / 13.27   AAA
       body  10.98 /  9.84 /  8.82   AAA
       muted  7.22 /  6.47 /  5.79   AAA·AA
       hint   3.24 /  2.91 /  2.60   FAILS WCAG AA on EVERY card surface

     — so the quiet-label rung was genuinely unreadable, not merely quiet, and the
     ladder's steps were lopsided (1.50 / 1.52 / 2.22): hint had fallen off the end.
     The new values pass AA on every surface at every rung and space the steps
     evenly (1.38 / 1.37 / 1.49), so the HIERARCHY is preserved — actually more
     regular — while the product reads lighter. Hue is unchanged (the same
     desaturated green-grey); only luminance moves. Headings are untouched: cream
     was already at the top of the ramp and lifting it would flatten the ladder.

       cream 16.52 / 14.81 / 13.27   AAA   (unchanged)
       body  11.93 / 10.69 /  9.58   AAA
       muted  8.74 /  7.83 /  7.01   AAA
       hint   5.88 /  5.27 /  4.72   AA

     Semantic pigments (--safety, --warning, --error, --ambiguous, the day/accent
     palette) are deliberately NOT touched — they carry meaning, not readability. */
  --cream:#E8EFE9;      /* headings */
  --body:#C0CFC4;       /* prose */
  --muted:#A0B3A6;      /* secondary */
  --hint:#849188;       /* quiet labels */

  /* semantic */
  --safety:#E8C77A;     /* safety / verify-with-source amber */

  /* ── semantic / state layer · Design System v1 (2026-07-07) ────────────────
     The reskin's feedback vocabulary, layered OVER the pigments above so there
     is ONE source of color. The existing names (--green, --cream, --forest…)
     stay authoritative; these add the *meaning* the design system assigns.
     Three NEW pigments are introduced because the product had no calm token for
     "the assistant is asking", "confirmed", or "failed":
       violet = assistant asking · eucalyptus = confirmed/focus · terracotta = failure.
     NOTE (deferred, see reskin): --gold is intentionally NOT redefined here — it
     is already consumed as the Never-Silent "unsaved" chip (#c9a86a fallback);
     its move to the design gold (#D4AF5C) lands with that surface's reskin, so
     the design gold lives on --warning/--undo for now. Nothing but --accent is
     consumed yet, and --accent resolves to --green exactly as its old fallback
     did — so adding this block changes no current pixel. */
  --violet:#9E8FA8;             /* assistant-asking hue (new pigment) */
  --euc:#5C7A6B;                /* confirmed / focus hue (new pigment) */
  --alert:#E0A38C;              /* terracotta — calm failure, never red-alarm (new) */
  --sage:#C9D6C5;               /* calm avatar sage — people render in one sage (new) */

  --accent:var(--green);        /* attention, directions — the one bright signal */
  --accent-ink:var(--ink);      /* text sitting on an accent fill */
  --success:var(--green);       /* saved, resolved */
  --never-silent:var(--green);  /* every outcome is shown */
  --warning:#D4AF5C;            /* schedule change / shift (design gold) */
  --error:var(--alert);         /* failure — terracotta */
  --ambiguous:var(--violet);    /* the assistant asking — collaborative, NOT an error */
  --resolved:var(--euc);        /* user-confirmed */
  --editing:var(--euc);         /* active focus ring */
  --undo:var(--warning);        /* reversible-window cue (gold) */
  --avatar:var(--sage);         /* every person avatar — one calm sage (E1a). Color is
                                   reserved for meaning; people are quiet, told apart
                                   by their initial, not by hue. */

  /* type */
  --display:'Sora',system-ui,sans-serif;
  --sans:'Hanken Grotesk',system-ui,sans-serif;
  --rounded:'Quicksand',system-ui,sans-serif;
  --mono:'Space Mono',ui-monospace,monospace;

  /* ── type scale · the reading order, ONE source (2026-07) ──────────────────
     The token system owned families and a color ladder (--cream/body/muted/hint)
     but NO size scale, so every surface invented its own px (8–40, with 8 near-
     duplicate metadata sizes alone). These map the five semantic roles of the
     product's reading order to a single ramp: date first, then the event that
     matters, then operational detail, then metadata. Sizes are the SMALLEST that
     create unmistakable hierarchy — not the largest the range allows. Views still
     tune for density by choosing the role that fits (a dense grid title uses
     --fs-op, a roomy lane uses --fs-event); this ramp removes the drift, not the
     intentional differences between views. Color/weight already ladder above.
     Values are RELATIVE (rem, and clamp for the responsive title) so the ramp
     scales with the root and stays mobile-first — the token is the contract, not
     today's px. Comments note the ~px each resolves to at the 16px root. */
  --fs-title:clamp(1.5rem, 1.3rem + 1vw, 1.75rem); /* orientation — day/date anchor · mobile-first 24→28 */
  --fs-event:1rem;      /* the event that matters — primary content title (~16) */
  --fs-op:0.875rem;     /* operational — times, drivers, kids, places (~14) */
  --fs-meta:0.6875rem;  /* metadata floor — source, sync, captions (~11) */
  --fs-cta:0.9375rem;   /* primary CTA label (~15) */
  --tap-min:44px;       /* minimum comfortable tap target — physical, stays px (a11y) */

  /* onboarding type — Betsy's brand spec (2026-06-22): Sora headers, Inter
     subheaders, Hanken body, Quicksand buttons, Space Mono times/codes. Anton
     retired ("yelling, not relaxing"). The calm tone IS the product. */
  --ob-display:'Sora',var(--display);     /* headers (h1/h2) */
  --ob-sub:'Inter',system-ui,sans-serif;  /* subheaders / eyebrows */
  --ob-sans:'Hanken Grotesk',var(--sans); /* body / other copy */
  --ob-button:'Quicksand',var(--rounded); /* buttons */
  --ob-mono:'Space Mono',var(--mono);     /* times + codes (always) */

  /* radii */
  --r-chip:8px; --r-input:12px; --r-card:16px; --r-panel:18px; --r-pill:999px;

  /* ── luminance · "heaven on earth" ──────────────────────────────────────
     The translucent, glowing-from-within feeling, captured as reusable tokens
     so any surface can inherit it — not just the Brain Purge orb. The idea:
     light seems to live inside the element and bleed softly past its edge,
     like frosted glass lit from behind. Use --lum-core for the bright inner
     light, --lum-veil for the soft mid, --glow-* for outer bloom that escapes
     the edge. Pair a radial fill (core→veil→green) with a --glow box-shadow.
     This is the soul of the app's surfaces; reach for it on hero moments. */
  --lum-core:rgba(255,255,255,.92);    /* the light within */
  --lum-halo:rgba(240,252,224,.85);    /* warm bloom just off the core */
  --lum-veil:color-mix(in srgb,var(--green) 70%,#fff 30%); /* frosted mid */
  --lum-edge:color-mix(in srgb,var(--green) 90%,#fff 10%); /* airy, light rim */
  --glow-near:rgba(210,240,180,.35);   /* tight bloom escaping the edge */
  --glow-far:rgba(180,225,140,.18);    /* wide soft aura */
  --glow-press:rgba(220,248,190,.55);  /* the swell of light on touch */
  --lum-inner-top:rgba(255,255,255,.62);   /* crown lit from inside */
  --lum-inner-base:rgba(150,190,110,.30);  /* base, still luminous not dark */

  /* ── scales the app lacked · Design System v1 ──────────────────────────────
     Spacing, elevation, and motion had NO tokens — every value was hardcoded.
     These formalize the design system's scales so reskinned rules can reference
     them instead of raw px. Radius is deliberately omitted: the app already has
     --r-chip/input/card/panel/pill, and adding the design's r-xs…r-xl would be a
     parallel radius system. Nothing consumes these yet — surfaces adopt them
     per-increment, so their presence changes no current pixel. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px;

  --e0:none;
  --e1:0 1px 2px rgba(0,0,0,.3);
  --e2:0 8px 24px rgba(0,0,0,.35);
  --e3:0 30px 80px rgba(0,0,0,.5);
  --e-glow:0 0 0 3px color-mix(in srgb, var(--euc) 14%, transparent);

  --dur-fast:.14s;   /* hovers, chips */
  --dur-base:.2s;    /* inputs, state changes */
  --dur-slow:.32s;   /* sheets, drawers */
  --ease:cubic-bezier(.2, 0, 0, 1);
  --save-flash:.4s;  /* blur-to-save acknowledgement (keyframe added with .is-saved) */
}

/* calm avatar / accent palette (Betsy's design tokens, Image 10 — use THESE for
   avatars, not the loud colors). Days of week + per-type card accents. */
:root{
  --day-mon:#5C7A6B; --day-tue:#C9D6C5; --day-wed:#B8AE9A;
  --day-thu:#E5DFD1; --day-fri:#6FCF8E; --day-wknd:#D9FF52;
  /* --acc-holiday is THE canonical holiday color for the whole product (2026-08-04).
     It was #E8C77A — byte-identical to --safety, so a holiday read as a verify-with-
     source warning. The violet below is NOT a new hue: it is the holiday color the
     product already showed (master-calendar's local .cal-pill.holiday), promoted out
     of that dormant view's private CSS into the named token so every live holiday
     pill consumes ONE owner regardless of holiday type. */
  --acc-camp:#5C7A6B; --acc-travel:#C7D4DB; --acc-holiday:#c9bbef;
  --acc-mystic:#C9D6C5; --acc-otd:#B89BB8; --acc-theme:#F2C9B8;
}

*{box-sizing:border-box;margin:0;padding:0;}
body{
  background:
    radial-gradient(ellipse 70% 50% at 50% -8%, rgba(191,232,154,0.06), transparent 60%),
    var(--ink);
  color:var(--body);
  font-family:var(--sans);
  font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; letter-spacing:-0.005em;
}
a{color:var(--green);text-decoration:none;}
::selection{background:rgba(191,232,154,0.25);color:var(--cream);}

/* ── Custom icon set ───────────────────────────────────────────────────────
   One rule for every icon rendered via shared/icon.js. The art is already
   the brand color (pistachio stroke + violet dot), so we don't recolor it;
   we only size and align it. Default 1em tracks the text it sits beside;
   callers pass {size} for fixed cases (nav slot below). */
.mb-ic{
  display:inline-block;
  width:1em; height:1em;
  vertical-align:-0.15em;        /* sit on the text baseline, not above it */
  flex:none;
}
/* nav slot: fixed 22px inside the existing .ic 20px-wide column */
.navitem .ic .mb-ic{ width:22px; height:22px; vertical-align:middle; }
/* loud failure marker for an unknown icon name (review-time safety net) */
.mb-ic-missing{
  display:inline-flex; align-items:center; justify-content:center;
  width:1em; height:1em; color:#fff; background:#c0392b;
  border-radius:3px; font-weight:700; font-size:0.8em;
}
@media (prefers-reduced-motion: reduce){ .mb-ic{ transition:none; } }