/* tokens.css — FinTelligence design tokens (extracted 2026-08-10, Phase B of the mode-class/tokens arc; values UNCHANGED from index.html's inline blocks). Two identity palettes selected by the device class the script stamps on (see index.html): :root — desktop Newsprint (base; also the JS-off failsafe) :root[data-ui="tech"] — phone/tablet cyan (Ruling 1: two Fin identities by device, permanently) Fam's body-scoped palettes stay in index.html with the Fam identity block — they are mode identity, not shared tokens. kristen/report keep their own inline palettes for now (import decision deliberately deferred). --font-sans introduced this pass: DM Sans, the app's most-used face, was previously only a hardcoded string on the body rule. --font-body remains the SERIF token (historic misname, documented here; rename deferred to a sweep with its ~consumers). */ :root{ --font-body:'Source Serif 4'; /* ⚠ the SERIF face — misnamed, kept for its consumers */ --font-sans:'DM Sans'; /* the actual body face (introduced 2026-08-10) */ --font-mono:'Fira Mono'; --font-display:'Gloock'; --font-prose:'Newsreader'; --font-accent:'Fraunces'; /* Type scale — every token is a whole pixel at the 16px root (blur guard) */ --fs-micro:0.5625rem;--fs-label:0.625rem;--fs-caption:0.6875rem;--fs-body-s:0.8125rem;--fs-body:0.9375rem;--fs-h3:1.125rem;--fs-h2:1.375rem;--fs-display:2.375rem; --ls-tight:-0.01em;--ls-label:0.5px;--ls-display:0.14em; --sp-1:0.3rem;--sp-2:0.6rem;--sp-3:0.8rem;--sp-4:1.2rem; --bg:#151210; --bg2:#1d1916; --bg3:#252019; --panel:#1a1613; --panel2:#080706; --panel3:#0f0d0b; --accent:#c9a66b; --accent2:#b08e55; --accent-soft:rgba(201,166,107,0.07); --green:#6bcf8e; --red:#e07070; --text:#dddad6; --text2:#a6a29c; --text3:#79756e; --border:#2e2823; --border2:#3d352e; --rule:rgba(201,166,107,0.12); --header-bg:rgba(21,18,16,0.78); /* regrade: bg-tinted, alpha preserved */ --header-shadow:none; --ticker-bg:var(--bg2); --ticker-border:none; --onion-bg:var(--panel2); --onion-border:none; --panel-header-hover:var(--bg3); --card-hover-bg:var(--panel3); --accent-hover:rgba(201,166,107,0.1); --star-color:#c9a66b; --feed-body-hover:var(--panel3); --toast-bg:var(--panel); --toast-border:var(--border2); --clamp-fade:linear-gradient(to bottom,transparent,var(--panel2)); --rollup-bg:var(--panel); --rollup-section-bg:var(--panel2); --rollup-section-border:1px solid rgba(255,255,255,0.03); --status-bg:var(--panel2); --status-hover:var(--bg3); --status-icon-bg:linear-gradient(135deg,var(--accent) 0%,rgba(201,166,107,0.4) 100%); --status-icon-color:var(--panel2); --ranch-sage:#7a9a6d;--ranch-sky:#6b8fad;--ranch-warn:#d4915e; --tier-warn:#e0a63e; /* precip mid-tier (50–90% of normal) — own token: brighter/yellower than --ranch-warn's terracotta, which serves sightings/supplies semantics */ /* Wine-type bands/chips (cellar tasting notes) — true varietal colors */ --wine-red:#7d2b3a;--wine-white:#dcc98a;--wine-rose:#e0a0a8;--wine-sparkling:#dab876;--wine-dessert:#8a4a2f;--wine-unknown:#55514b; /* Cellar Composition rank palette (cellar-composition v3): w1 garnet → w6 olive → w7 slate, w8 mushroom reserved for the "Other" bucket. Values from the mockup; tune per-shade here. */ --w1:#6e2436;--w2:#9a3f42;--w3:#b96b45;--w4:#c99055;--w5:#d8b25e;--w6:#9aa06a;--w7:#7d7f9a;--w8:#a89a86; --care-fertilize:#4a8c3f;--care-prune:var(--accent);--care-water:#5b9bd5; /* Newly tokenized (1.3) — values are the previous hardcodes verbatim, so desktop is unchanged. Fam surfaces override these in the mobile query. --tier-wet is LIVE as of ranch-panel-polish: it fills the >100%-of-normal droplet, and rainTier() ships the ruled ≤50/≤80/>80 thresholds. */ --tier-wet:#6fb0e0; --chip-sage-bg:rgba(122,154,109,0.12);--chip-sky-bg:rgba(107,143,173,0.12); --chip-warn-bg:rgba(212,145,94,0.12);--chip-dim-bg:rgba(107,102,94,0.15); --chip-red-bg:rgba(224,112,112,0.10); --dw-hold:#e6b800;--dw-hold-bg:rgba(230,184,0,0.06);--dw-ready-bg:rgba(107,207,142,0.06); /* Tokenized (1.5b) — values are the previous hardcodes verbatim, so desktop is unchanged. Fam surfaces override these in the mobile query. */ --stat-label-color:rgba(255,255,255,0.72); --badge-bg:rgba(0,0,0,0.3); --header-rule2:rgba(201,166,107,0.45); --sub-card-border:rgba(255,255,255,0.04); --bar-track:rgba(255,255,255,0.06); --cal-row-rule:rgba(255,255,255,0.04); --care-fertilize-bg:rgba(74,140,63,0.06);--care-prune-bg:rgba(201,166,107,0.06);--care-water-bg:rgba(91,155,213,0.06); /* care-calendar current-month band (punch-list B4) — transparent HERE by design: desktop stays byte-identical; Fam surfaces + kristen (via the component fallback) carry real values. */ --cal-now-band:transparent; /* Movie list (movie-list F-task) — values per mockup v2's DARK column (desktop IS Newsprint dark). Person colors follow the calendar T/K convention (--p-t/--p-k match --mark-blue/--mark-pink by design). */ --p-t:#6ba3c9;--p-k:#e08aa8;--p-e:#e0a63e;--p-v:#7fc0ae; --chip-movie:#d4915e;--chip-tv:#6b8fad; --pop-red:#d45a48;--pop-corn:#e8d5a0; /* Accent-alpha ladder (Phase C, 2026-08-08 blanket ruling): the wash levels formerly hand-typed as rgba(201,166,107,X) at 33 sites. Values preserve each site exactly; in tech the same tokens resolve cyan — the ruled gold-in-cyan class fix, expressed once. */ --accent-a04:rgba(201,166,107,0.04); --accent-a06:rgba(201,166,107,0.06); --accent-a08:rgba(201,166,107,0.08); --accent-a10:rgba(201,166,107,0.1); --accent-a15:rgba(201,166,107,0.15); --accent-a18:rgba(201,166,107,0.18); --accent-a20:rgba(201,166,107,0.2); --accent-a22:rgba(201,166,107,0.22); --accent-a25:rgba(201,166,107,0.25); --accent-a30:rgba(201,166,107,0.3); --accent-a35:rgba(201,166,107,0.35); --accent-a40:rgba(201,166,107,0.4); /* Radius tokens (Phase C): the dominant exact values, tokenized without collapse — the 15-to-3 consolidation is a later value-edit, not this pass. */ --r-2:2px;--r-3:3px;--r-4:4px;--r-6:6px;--r-8:8px;--r-pill:999px;--r-round:50%; /* Green/red alpha steps (2026-08-08, MA-glow): the market verdict colors had no alpha rungs — the MA chip itself uses a literal .08 wash. Two levels, per-palette like the accent ladder. */ --green-a15:rgba(107,207,142,0.15);--green-a35:rgba(107,207,142,0.35); --red-a15:rgba(224,112,112,0.15);--red-a35:rgba(224,112,112,0.35); /* Theme additions (light/dark build, 2026-08-08) */ --text-strong:#ffffff; /* brightest text tier (was hardcoded at 6 sites) */ --chart-accent:#c9a66b; /* data-line color — split from --accent so mobile keeps gold charts byte-identical while light switches lines to ink (ruled 2026-08-08) */ --warn:#f5b942; /* warning amber (was hardcoded at the degraded strip + ut-backup.stale + sysstrip pip.w) */ --warn-a45:rgba(245,185,66,0.45);--warn-a40:rgba(245,185,66,0.4);--warn-a06:rgba(245,185,66,0.06); } :root[data-ui="tech"]{ /* Mobile palette — Tech-inspired cyan/dark blue, locked. (Desktop is now Newsprint-only; mobile owns its own design system.) ── IDENTITY SCOPE (mode-class fix, 2026-08-10) ───────────────────── Was @media(max-width:768px){:root{...}} — width-as-identity, the root cause of the Fam-landscape evaporation and the narrow-desktop cyan flash. Now keyed on the device class computed once in the script: phones AND tablets get tech (Ruling 2), desktops get the base :root Newsprint at ANY window width. Specificity (0,1,1) beats the base :root (0,1,0) wherever the attribute matches. ── FIGURE/GROUND INVERSION (ruled 2026-08-01) ────────────────────── Panels are RECESSED WELLS on a lighter field, not lifted cards on a dark field. Ladder before: bg #030d1a < panel #06101e < panel2 #081225 < panel3 #0c1a32 (lifted). Ladder now: field #0c1a32 > bg2 lip #070d16 > panel well #04080d > panel2 card #020508. --bg reuses the old --panel3 value verbatim (near-dup rule): presses that fill with --panel3 now read as "brighten to field level" — semantically neat rather than arbitrary. --panel3 itself keeps #0c1a32 for exactly that reason. --bg2 sits just above the well so panel headers read as a slightly raised lip inside the recess. No inset shadow anywhere — straight value inversion, per ruling. ⚠ Fill-based press/hover states SURVIVE the inversion: near-black cards have MAXIMUM brighten headroom (the original "fills are in trouble" premise had the compositing backwards — ruled corrected). The real casualties were two washes hand-tuned to the OLD ladder (--panel-header-hover and the vp glass center), both retuned below/ at their sites this commit. Translucent chrome family (--header-bg, --ticker-bg, --onion-bg, --toast-bg, --rollup-*, --status-*) left as-is by ruling — composites reported, Tyler rules on any that read wrong. Scope: THIS block only — Fam redefines every token here, and desktop Fin has its own :root; neither is touched. */ --bg:#0c1a32;--bg2:#070d16;--bg3:#0a1628; --panel:#04080d;--panel2:#020508;--panel3:#0c1a32; --accent:#00f5ff;--accent2:#00c8d4; --accent-soft:rgba(0,245,255,0.06); --green:#00ff88;--red:#ff3355; /* brief-panel-mobile: gold bolt on the Generate primary + YouTube-brand red on the intake sheet's YT chip. Fin-mobile-only consumers (the brief panel is hidden in Fam), declared here where they render. */ --bolt-gold:#f5c542;--yt-red:#e53935; /* Bumped luminance on text2/text3 for mobile legibility */ --text:#dde8f2;--text2:#9ab4ca;--text3:#6a8aa3; /* Inversion borders (ruled): lifted toward the new field so a well's rim reads against BOTH the #0c1a32 field outside and the #04080d well inside. Old values (#0a2244/#0d3560) were tuned against near-black. */ --border:#173047;--border2:#1c3247; --rule:rgba(0,245,255,0.08); --header-bg:rgba(8,18,37,0.85); --ticker-bg:rgba(4,14,30,0.95); --onion-bg:rgba(3,10,24,0.95); /* Retuned this commit (ruled): the old rgba(8,18,37,0.65) composited to a Δ≈10/255 blip over the new #070d16 lip — invisible feedback, worse than ugly feedback. Border-blue wash now lands ≈#0f1f2e over the lip: Δ≈(8,18,24), plainly visible, in the new border family. */ --panel-header-hover:rgba(23,48,71,0.55); --card-hover-bg:rgba(20,40,80,0.85); --accent-hover:rgba(0,245,255,0.06); --star-color:#00f5ff; --feed-body-hover:rgba(20,40,80,0.85); --toast-bg:rgba(6,16,30,0.9); --clamp-fade:linear-gradient(to bottom,transparent,rgba(1,3,8,0.65)); --rollup-bg:rgba(6,16,30,0.6); --rollup-section-bg:rgba(1,3,8,0.65); --rollup-section-border:1px solid rgba(0,245,255,0.07); --status-bg:rgba(3,10,24,0.85); --status-hover:rgba(6,16,34,0.9); --status-icon-bg:linear-gradient(135deg,rgba(0,245,255,0.8) 0%,rgba(0,102,255,0.4) 100%); --status-icon-color:#030d1a; /* Ranch + garden-care accents, cool-shifted for the cyan palette */ --ranch-sage:#4fae8f;--ranch-sky:#4f9fd8;--ranch-warn:#e8a54e; --tier-warn:#e8a54e; /* Wine bands/chips — brightened + cool-shifted for the near-black cyan theme */ --wine-red:#b8455a;--wine-white:#d4cb96;--wine-rose:#e2a4b0;--wine-sparkling:#d0c088;--wine-dessert:#a86242;--wine-unknown:#566572; --care-fertilize:#2fae72;--care-prune:#00c8d4;--care-water:#4f9fd8; /* 1.5b tokens — restated verbatim per dual-theme contract (Fin byte-identical) */ --stat-label-color:rgba(255,255,255,0.72); --badge-bg:rgba(0,0,0,0.3); --header-rule2:rgba(201,166,107,0.45); --sub-card-border:rgba(255,255,255,0.04); --bar-track:rgba(255,255,255,0.06); --cal-row-rule:rgba(255,255,255,0.04); --care-fertilize-bg:rgba(74,140,63,0.06);--care-prune-bg:rgba(201,166,107,0.06);--care-water-bg:rgba(91,155,213,0.06); --cal-now-band:transparent; /* garden hidden in Fin-mobile; restated per dual-theme contract */ /* mobile-only nav chrome (no desktop consumer) — values verbatim */ --nav-rule:rgba(0,245,255,0.20); --nav-chip-bg:rgba(255,255,255,0.025); --nav-active-border:rgba(201,166,107,0.35); /* Type/spacing tokens — theme-invariant, restated per dual-theme contract */ --fs-micro:0.5625rem;--fs-label:0.625rem;--fs-caption:0.6875rem;--fs-body-s:0.8125rem;--fs-body:0.9375rem;--fs-h3:1.125rem;--fs-h2:1.375rem;--fs-display:2.375rem; --ls-tight:-0.01em;--ls-label:0.5px;--ls-display:0.14em; --sp-1:0.3rem;--sp-2:0.6rem;--sp-3:0.8rem;--sp-4:1.2rem; /* Accent-alpha ladder — cyan resolution (same levels as base). */ --accent-a04:rgba(0,245,255,0.04); --accent-a06:rgba(0,245,255,0.06); --accent-a08:rgba(0,245,255,0.08); --accent-a10:rgba(0,245,255,0.1); --accent-a15:rgba(0,245,255,0.15); --accent-a18:rgba(0,245,255,0.18); --accent-a20:rgba(0,245,255,0.2); --accent-a22:rgba(0,245,255,0.22); --accent-a25:rgba(0,245,255,0.25); --accent-a30:rgba(0,245,255,0.3); --accent-a35:rgba(0,245,255,0.35); --accent-a40:rgba(0,245,255,0.4); /* Green/red alpha steps — tech resolution. */ --green-a15:rgba(0,255,136,0.15);--green-a35:rgba(0,255,136,0.35); --red-a15:rgba(255,51,85,0.15);--red-a35:rgba(255,51,85,0.35); --text-strong:#ffffff; --chart-accent:#c9a66b; /* explicit: mobile charts STAY GOLD (byte-identical control); cyan-charts is an open question, not this build */ --warn:#f5b942;--warn-a45:rgba(245,185,66,0.45);--warn-a40:rgba(245,185,66,0.4);--warn-a06:rgba(245,185,66,0.06); /* mobile byte-identical */ } /* ── Desktop LIGHT — "Daylight" (ruled 2026-08-08) ───────────────────────── Selected by html[data-theme="light"], stamped pre-paint by the head script; desktop identity only (data-ui="news") — tech and Fam never match this. FIGURE/GROUND FLIPS here (ruled, hard verification assert): --panel2 is the LIGHTEST surface (#ffffff cards LIFTING off warmer paper), the inverse of dark's recessed wells. NO GOLD: --accent is ink; the accent ladder derives via color-mix so a future bronze try is a ONE-VALUE edit (ruled — the hand-expanded rgba ladders in the other blocks stay as verified). Values marked DERIVED were not in the ruling and are tuned to its frame — each is a one-line retune. */ :root[data-ui="news"][data-theme="light"]{ --bg:#eae7e0; /* page */ --bg2:#e2ded5; /* ticker band (chained: --ticker-bg) */ --bg3:#ded9ce; /* DERIVED hover step */ --panel:#f7f5f0; --panel2:#ffffff; /* cards — LIGHTEST (figure/ground flip) */ --panel3:#f2efe8; /* DERIVED intermediate/hover card shade */ --accent:#191713; /* ink — the one-value bronze handle */ --accent2:#3d372e; /* DERIVED ink-warm secondary */ --accent-soft:color-mix(in srgb, var(--accent) 7%, transparent); --accent-a04:color-mix(in srgb, var(--accent) 4%, transparent); --accent-a06:color-mix(in srgb, var(--accent) 6%, transparent); --accent-a08:color-mix(in srgb, var(--accent) 8%, transparent); --accent-a10:color-mix(in srgb, var(--accent) 10%, transparent); --accent-a15:color-mix(in srgb, var(--accent) 15%, transparent); --accent-a18:color-mix(in srgb, var(--accent) 18%, transparent); --accent-a20:color-mix(in srgb, var(--accent) 20%, transparent); --accent-a22:color-mix(in srgb, var(--accent) 22%, transparent); --accent-a25:color-mix(in srgb, var(--accent) 25%, transparent); --accent-a30:color-mix(in srgb, var(--accent) 30%, transparent); --accent-a35:color-mix(in srgb, var(--accent) 35%, transparent); --accent-a40:color-mix(in srgb, var(--accent) 40%, transparent); --green:#2f7248;--red:#a83a37; --green-a15:rgba(47,114,72,0.15);--green-a35:rgba(47,114,72,0.35); --red-a15:rgba(168,58,55,0.15);--red-a35:rgba(168,58,55,0.35); --text:#191713;--text2:#6b6355; /* text3 darkened from the ruled #948b7c (2.72:1 on page — bright-room fade) to AA-on-page (ruled 2026-08-08). COST, stated: text2 (4.87:1) and text3 (4.6:1) nearly converge — the faint tier reads as muted in light. Retune candidate if hierarchy matters more than AA after the live look. */ --text3:#6f675a; --text-strong:#191713; /* strong tier = full ink; hierarchy via weight */ --chart-accent:#191713; /* ink data lines (ruled: chart golds fail on white) */ --border:#dcd6cb;--border2:#cbc3b4; --rule:color-mix(in srgb, var(--accent) 12%, transparent); --header-bg:rgba(247,245,240,0.82); /* DERIVED panel-tinted, dark's alpha register */ --header-shadow:0 1px 3px rgba(25,23,19,0.06); /* DERIVED faint lift */ --ticker-border:none; --onion-bg:#efece5; --onion-border:none; --panel-header-hover:var(--bg3); --card-hover-bg:var(--panel3); --accent-hover:color-mix(in srgb, var(--accent) 10%, transparent); --star-color:#c9a66b; /* stars stay gold — Fam's "gold demoted to stars only" precedent; flag to retune if it reads wrong on white */ --feed-body-hover:var(--panel3); --toast-bg:var(--panel2);--toast-border:var(--border2); --clamp-fade:linear-gradient(to bottom,transparent,var(--panel2)); --rollup-bg:var(--panel); --rollup-section-bg:var(--panel2); --rollup-section-border:1px solid rgba(25,23,19,0.06); /* white-alpha family → ink-alpha */ --status-bg:var(--panel2); --status-hover:var(--bg3); --status-icon-bg:linear-gradient(135deg,var(--accent) 0%,color-mix(in srgb, var(--accent) 40%, transparent) 100%); --status-icon-color:#f7f5f0; --header-rule2:color-mix(in srgb, var(--accent) 45%, transparent); --stat-label-color:rgba(25,23,19,0.72); --badge-bg:rgba(25,23,19,0.06); --sub-card-border:rgba(25,23,19,0.05); --bar-track:rgba(25,23,19,0.08); --cal-row-rule:rgba(25,23,19,0.05); /* Warning ochre (ruled 2026-08-08): amber #f5b942 measured 1.62:1 on cream — a whisper, not a warning. #855e06: 5.4:1 on panel, 4.8:1 on page — AA with margin on every surface a warn consumer occupies. */ --warn:#855e06; --warn-a45:color-mix(in srgb, var(--warn) 45%, transparent); --warn-a40:color-mix(in srgb, var(--warn) 40%, transparent); --warn-a06:color-mix(in srgb, var(--warn) 8%, transparent); /* 8%: the 6% wash vanished on cream */ }