/* ─────────────────────────────────────────────────────────────
   GENERATED FILE — do not edit by hand.
   Source: tokens.json  ·  App: Life OS (brittanykira.com)
   Regenerate with:  python3 build.py
   ───────────────────────────────────────────────────────────── */
:root {

  /* ── Canvas & surfaces ── */
  /* Dark stack, back to front. --bg is the PWA theme-color (#000). Each step up is a lighter plane; never introduce an in-between grey — pick the nearest step. */
  --bg: #000000;  /* True-black canvas = PWA theme-color. Absorbs the #050505/#060606/#070707 drift. */
  --surface: #0c0c0c;  /* Default card/section surface (.lo-sec). Was #080808 in the old token; #0c0c0c is the real dominant (88 uses). Absorbs #0a0a0a/#0b0b0b/#0d0d0d. */
  --raised: #161616;  /* Inner/elevated surface — a tile on a card, an input well. Absorbs #141414/#111111/#101010. */
  --border: #1c1c1c;  /* Default hairline (dominant, 144 uses). Card edges, dividers between rows. */
  --border-strong: #262626;  /* Stronger divider where the hairline reads too faint. Absorbs #242424/#2a2a2a/#232323. */
  --line: #3a3a3a;  /* Visible rule / input border / control outline at rest. Absorbs #333333/#3c3c3c. */
  --faint: #444444;  /* Disabled control edges, ghost outlines. Absorbs #4a4a4a/#4f4f4f. */

  /* ── Text ── */
  /* Four steps, all ≥4.5:1 on --bg. Britt has repeatedly brightened these for readability (see the #555→#8f8f8f history in the old token); the ramp is deliberately bright. */
  --text: #ffffff;  /* Primary text and headings on dark. Contrast 21:1. */
  --soft: #dddddd;  /* Secondary / body-length text. Was #b8b8b8; re-anchored UP to the real dominant #dddddd (66 uses). ~16:1. */
  --muted: #9a9a9a;  /* Labels, meta, captions, subtle 2px borders. Was #8f8f8f; nudged to #9a9a9a (real, 49 uses, ~7:1) — still the readability floor. Absorbs #7a7a7a/#8a8a8a UP to here. */

  /* ── Jewel accents ── */
  /* Bright, saturated hues on black. --accent is the brand raspberry and aliases --pink. These are used both as chrome (a coloured card top-edge --bc) and as text. Do not add new accent hues without adding a token here. */
  --accent: #fd019e;  /* Brand raspberry-pink. Primary action, active/selected, brand mark. */
  --pink: var(--accent);  /* alias of --accent */
  --violet: #a445fe;  /* Secondary accent. Frequent section top-edge. */
  --blue: #5bc1ff;  /* Periwinkle — the light cool note. Info, links-in-tint, the 'better' tier. */
  --teal: #00b6c5;  /* Default --bc for .lo-sec when no tint is set. */
  --green: #07e5b2;  /* Positive / done. Aliased by --success. */
  --magenta: #d70cd8;  /* Fuchsia — hot / alert edge. Aliased by --danger. */
  --indigo: #635dfe;  /* Deep blue-violet. Was --gold; the palette went cool 2026-07-27 and this slot holds the deep note now. */

  /* ── Semantic ── */
  /* Feedback colours. success/danger reuse the jewel hues so there is one green and one red in the system; the -soft pair is the readable text tint used next to the dot (see .lo-save in base.html). */
  --success: var(--green);  /* Save confirmed, positive result. NOT for completion inside a progress control — a closed ring is already the signal, so it completes in its own hue. See RATIONALE § Completion inside a progress control. */
  --success-soft: #9aebcd;  /* Text beside the success dot (#35e082 as text is too vibrant next to small type). */
  --danger: var(--magenta);  /* Save failed, destructive, error. */
  --danger-soft: #ec91e9;  /* Text beside the danger dot. */
  --warning: #e8a33a;  /* Amber caution — 'not synced yet', 'filling a past day', overdue. DELIBERATELY still warm: the palette went cool 2026-07-27, but amber-for-caution is a real-world convention (signs, signals) and it is now the only warm note, which makes a warning stand out rather than blend in. */
  --link: #79c7fe;  /* Soft link-out blue for the ↗ 'open in Notion / full page' links. Lower chroma than --blue on purpose so links don't shout. */

  /* ── Tier tints ── */
  /* The good/better/best habit ladder. Pre-existing tokens, kept verbatim — already used across templates. bg/bd/tx = background / border / text for each tier chip. */
  --good-bg: rgba(255,255,255,0.04);
  --good-bd: var(--border);
  --good-tx: var(--soft);
  --better-bg: rgba(91,193,255,0.12);  /* periwinkle tint — follows --blue */
  --better-bd: rgba(91,193,255,0.4);  /* periwinkle tint — follows --blue */
  --better-tx: var(--blue);  /* was a hardcoded #4d8bff copy; now references the token so it cannot drift */
  --best-bg: rgba(253,1,158,0.12);  /* accent tint — follows --accent */
  --best-bd: rgba(253,1,158,0.4);  /* accent tint — follows --accent */
  --best-tx: var(--accent);

  /* ── Layout ── */
  /* Content column widths and the page gutter. Pre-existing, kept verbatim. */
  --pad: clamp(1.25rem, 4vw, 3rem);  /* Page horizontal gutter. */
  --page-w: 1080px;  /* Standard content column. */
  --page-w-wide: 1280px;  /* Grid-heavy pages: calendar, task board, ATC. */

  /* ── Space ── */
  /* Named spacing steps (rem). Replaces 104 ad-hoc rem values. Use these for padding/margin/gap. The scale is denser at the small end because most UI spacing lives there. */
  --s-1: 0.25rem;  /* hairline gap */
  --s-2: 0.35rem;  /* tight (icon↔label) */
  --s-3: 0.5rem;  /* default small gap (most-used, 379) */
  --s-4: 0.65rem;  /* row gap (absorbs 0.6/0.62/0.66) */
  --s-5: 0.8rem;  /* comfortable (absorbs 0.75/0.78/0.82/0.85) */
  --s-6: 1rem;  /* block padding */
  --s-7: 1.25rem;  /* card padding */
  --s-8: 1.5rem;  /* section gap */
  --s-9: 2rem;  /* large section gap */
  --s-10: 3.5rem;  /* page-level vertical rhythm */

  /* ── Radius ── */
  /* Six steps. Replaces ~18 values. Pills were written 3 ways (100px/999px/50%) — use --r-pill (or 50% only for true circles). */
  --r-xs: 4px;  /* chips, tags, small controls */
  --r-sm: 6px;  /* thumbnails, inputs (absorbs 5/7px) */
  --r: 8px;  /* default card/button (dominant, 111) */
  --r-md: 12px;  /* prominent cards */
  --r-lg: 14px;  /* .lo-sec section cards */
  --r-pill: 999px;  /* pills, fully-rounded */

  /* ── Type ── */
  /* Families + an 8-step size ramp (rem). Bebas Neue = display headings; DM Sans = UI/body; Cormorant = editorial italic notes. Sizes replace 93 ad-hoc font-sizes. */
  --font-display: 'Bebas Neue', sans-serif;  /* Uppercase headings, section titles, logo. */
  --font-sans: 'DM Sans', system-ui, sans-serif;  /* All UI and body text. */
  --font-serif: 'Cormorant Garamond', serif;  /* Italic notes / quiet asides (.save-note). */
  --fs-1: 0.6rem;  /* micro label / eyebrow (uppercase, tracked) */
  --fs-2: 0.7rem;  /* small meta */
  --fs-3: 0.8rem;  /* body-small / control text */
  --fs-4: 0.9rem;  /* body */
  --fs-5: 1rem;  /* body-large */
  --fs-6: 1.15rem;  /* small title */
  --fs-7: 1.35rem;  /* section title (.lo-sec-t) */
  --fs-display: clamp(1.9rem, 4.5vw, 3rem);  /* page hero / display */

  /* ── Motion ── */
  /* One easing curve, three durations. --dur-fast is the de-facto standard (was written as both .14s and .15s, 160 uses combined). Replace `linear` easing with --ease for opacity/transform. */
  --dur-fast: 140ms;  /* hover/press feedback, checkmarks */
  --dur: 180ms;  /* default transitions, chevrons */
  --dur-slow: 300ms;  /* panels, overlays */
  --ease: cubic-bezier(.4, 0, .2, 1);  /* standard easing (material-ish). Use everywhere instead of `linear`/`ease`. */

  /* ── Focus & elevation ── */
  /* MANDATORY. The app currently strips outlines 76 times and defines :focus-visible 0 times. --ring is the replacement: a box-shadow halo (a bg-coloured gap + an accent ring) that adds no layout shift. Any `outline:none` must pair with `:focus-visible { box-shadow: var(--ring) }`. */
  --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);  /* Keyboard focus ring. Apply on :focus-visible. */
  --shadow-1: 0 2px 8px rgba(0,0,0,0.4);  /* raised element */
  --shadow-2: 0 8px 32px rgba(0,0,0,0.6);  /* overlay / modal */

  /* ── Candy — the Wardrobe's bright theme (2026-08-04) ── */
  /* Britt chose a bright, cheerful 'candy pop' direction for the /wardrobe surface (iPad-first) — the one deliberate light island in the dark app. These tokens are consumed ONLY inside the .wr-candy scope (_wardrobe_theme.html), which remaps the core surface/text/border tokens to them; nothing outside the wardrobe changes. Five pastel lane panels each carry a hue-matched deep partner for text on that pastel (contrast ≥ 4.5:1). The jewels (accent/violet/blue…) still do accents and gradients — candy replaces the NEUTRALS, not the brand. */
  --candy-bg: #fff5fa;  /* Page canvas — blush. Remaps --bg inside .wr-candy. */
  --candy-surface: #ffffff;  /* Cards and plates. Remaps --surface / --soft (garment plates go pure white — full brightness was the whole point). */
  --candy-well: #faeef5;  /* Inner wells / raised tiles. Remaps --raised. */
  --candy-ink: #2c2335;  /* Primary text on candy. Remaps --text. Plum-black, not grey. */
  --candy-ink-soft: #5f5468;  /* Secondary text. Remaps --soft-as-text via --candy scope. */
  --candy-ink-mute: #8f7f99;  /* Labels / meta. Remaps --muted. ~4.6:1 on candy-bg. */
  --candy-edge: #f6e0ec;  /* Default hairline. Remaps --border. */
  --candy-edge-strong: #eccfdf;  /* Stronger divider. Remaps --border-strong. */
  --candy-line: #d8b3c9;  /* Control outline at rest. Remaps --line. */
  --candy-faint: #c9a2bc;  /* Ghost outlines / disabled edges. Remaps --faint. */
  --candy-lav: #f1e8ff;  /* Lane panel · Layer. Pastel lavender. */
  --candy-lav-deep: #6d2fe0;  /* Text/ring on candy-lav. */
  --candy-rose: #ffe3f0;  /* Lane panel · Top. Pastel rose. */
  --candy-rose-deep: #c9126e;  /* Text/ring on candy-rose. */
  --candy-sky: #dff1ff;  /* Lane panel · Bottom. Pastel sky. */
  --candy-sky-deep: #0a6cb5;  /* Text/ring on candy-sky. */
  --candy-mint: #dcf9ea;  /* Lane panel · Shoes. Pastel mint. */
  --candy-mint-deep: #087a54;  /* Text/ring on candy-mint. */
  --candy-butter: #fff3d3;  /* Lane panel · Bag. Pastel butter — candy earns a warm note the dark app doesn't have; it IS the cheer. */
  --candy-butter-deep: #8a6202;  /* Text/ring on candy-butter. */
  --candy-shadow: 0 4px 12px rgba(163, 88, 148, 0.10);  /* Resting card shadow on candy. */
  --candy-shadow-lift: 0 12px 26px rgba(163, 88, 148, 0.22);  /* Selected / hovered lift. */
  --candy-glow: 0 10px 26px rgba(253, 1, 158, 0.32);  /* Primary-button glow (accent at 32%). */
}