/* ============================================================================ Shea's Forest — Design Tokens · BLOCK B1 (the shell's token layer) ---------------------------------------------------------------------------- The single source of color / type / space / motion for the app. DP-017 — THE REDESIGN (S11.1816, Track T of the sequential build). Supersedes the Living-Grove palette (design/forest-campaign-design-language-plan-v1.md §palette — a candidate Growth Ring, Ring Test at the Settle). The thesis is no longer "the grove at dawn" in green — it is a CONVENTIONAL TOOL in a cool blue-black skin whose ONE warm point is the mark's gold bit: modern, with heart. The DP-017 vocabulary (--ground/--surface/--accent/--ink/--gold) is primary; the Living-Grove names below it are a COMPAT LAYER remapped to the new palette, so shell.css re-skins with zero edits while Tracks F/B/P/M do the structural work and migrate + retire the compat layer. Dark is the default (operator, S11.1816); [data-theme="light"] carries the light variant. Every block reads its colors from here; nothing hard-codes a hex. ============================================================================ */ :root { /* ====================================================================== DP-017 PRIMARY VOCABULARY — the new skin (dark, default) ====================================================================== */ /* ---- Grounds & surfaces (cool blue-black, low to high) ---- */ --ground: #0B0F14; /* app ground · content pane */ --surface: #131A22; /* top bar · left menu · raised chrome */ --surface-2: #1B242E; /* cards · active item · popovers */ --surface-deep:#06090D; /* below-ground band */ /* ---- The electric-blue accent (active · selected · focus) ---- */ --accent: #3B9EFF; --accent-lit: #5FB0FF; /* hover · raised */ --accent-dim: color-mix(in srgb, var(--accent) 20%, transparent); /* ---- Ink (cool near-white → quiet) ---- */ --ink: #E6EDF3; /* primary text */ --ink-soft: #9DA9B7; /* secondary · labels */ --ink-faint: #5B6673; /* tertiary · quiet · placeholder */ /* ---- Gold — THE LONE WARM (the mark's bit + the active heartbeat) ---- */ --gold: #C9A84C; /* == the wordmark --id-accent, verbatim */ --gold-soft: #E4C766; /* lifted gold — highlights */ /* ---- Lines ---- */ --line: #263140; /* hairline borders */ --line-strong: #33404F; /* emphasized divider */ --line-gold: color-mix(in srgb, var(--gold) 34%, transparent); /* the salvaged DP-006 hairline discipline — restraint accent */ /* ---- Clear / attested cool signal (defines the formerly-undefined --teal) ---- */ --teal: #5DCAA5; /* attested / clear — cool, not green paint */ /* ====================================================================== COMPAT LAYER — Living-Grove names shell.css still consumes, remapped to the DP-017 palette by ROLE (light-ground → dark-ground flip). Retired track-by-track as F/B/P/M migrate shell.css. ====================================================================== */ /* --canopy RETIRED (DP-017 §3). Its two jobs were split at S13.1051: FIGURE roles → --figure (below); WASH/shadow roles → --surface (byte-identical, since --canopy already resolved to --surface — a no-op rename, zero re-tint). */ --figure: var(--accent); /* the FIGURE — names, emphasis, marks. 6.88:1 on ground · 6.27:1 on surface · 5.62:1 on surface-2. AA text on all three. */ --shadow: var(--ground); /* was dark-green ground → the blue-black ground */ --bark: var(--ink-soft); /* secondary text */ --moss: var(--ink-faint); /* tertiary text / labels */ --moss-ink: var(--ink-faint); --sunlight: var(--gold); /* the accent gold — kept */ --sunlight-soft: var(--gold-soft); --floor: var(--ground); /* was lightest surface → the ground */ --paper: var(--surface); /* was the card → surface */ --surface-card: var(--surface); --ink-on-dark: var(--ink); /* everything's on dark now */ --ink-on-dark-soft: color-mix(in srgb, var(--ink) 64%, transparent); /* ── THE PRIMARY-ACT PAIR (S13.0950, forest-rail-compose-invisible-fill) ──────── Read the compat notes above literally: --canopy WAS "green primary structure" (a FIGURE) and now resolves to --surface (a GROUND). --floor WAS "lightest surface" and now resolves to --ground (the darkest). The compat layer kept the NAMES and inverted the ROLES — so every control that filled with --canopy went to 1.00:1 against the surface it sits on. .rail__compose was one of them: an invisible button on mail's only compose home, live in production. The primary act takes --accent — the app's own interactive hue, which is what a primary CTA *is*. Gold is scarce by DP-017 (the mark's bit is the lone warm point); spending it on a control would contradict the call the operator made. */ --ink-on-accent: var(--ground); /* dark skin: --accent is BRIGHT → dark label (6.88:1) */ --accent-strong: var(--accent-lit); /* dark skin: hover LIFTS (7.63:1 vs surface) */ /* NOTE: on dark, --figure == --accent at rest; --accent-lit stays the hover lift. */ --line-bark: var(--line); --line-moss: var(--line); --ring: var(--line-gold); /* the never-default ring — now a gold hairline */ /* ---- Dawn gradient (the old homepage atmosphere — cooled to blue-black; F retires it) ---- */ --dawn-top: var(--ground); --dawn-mid: var(--surface); --dawn-low: var(--surface-2); --dawn-glow: var(--gold); /* ---- Status weather (calm; no red — Theo's rule) ---- */ --w-active: var(--gold); /* risen, needs you today (the warm spark) */ --w-quiet: var(--ink-faint); /* present, calm */ --w-deep: var(--ink-soft); /* deep work */ --w-ok: var(--teal); /* attested / clear */ /* ---- Honest-badge grammar (DP-006 §3f — form carries state, never a fabricated green) ---- */ --badge-known: var(--teal); /* verified clear / attested */ --badge-known-due: var(--gold); /* verified, needs you today */ --badge-known-ink: var(--ink); /* string on a known/known-due chip — completes the -ink set (S13.1134) */ --badge-overdue: color-mix(in srgb, var(--gold) 62%, var(--ink-soft)); /* heavier gold, still no red */ --badge-overdue-ink: var(--ground); /* legible string on the gold chip */ --badge-unreachable: transparent; /* NO FILL — the FORM carries the state (H3) */ --badge-unreachable-line: var(--ink-faint); --badge-unreachable-ink: var(--ink-faint); --badge-unreachable-form: dashed; /* ====================================================================== STRUCTURE — type / scale / space / motion (unchanged by the reskin) ====================================================================== */ /* ---- Type families (DP-006 §3b — Fraunces display · Spectral body · Spline Sans Mono data) ---- */ --face-canopy: 'Fraunces', Georgia, 'Times New Roman', serif; /* display / wordmark "Loop" */ --face-path: 'Spectral', Georgia, 'Times New Roman', serif; /* body */ --face-survey: 'Spline Sans Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;/* data / labels / "MMT" */ --face-mono: var(--face-survey); /* ---- Type scale (modular, ~1.25) ---- */ --t-masthead: clamp(2.4rem, 6vw, 3.6rem); --t-title: clamp(1.5rem, 3.4vw, 2.1rem); --t-h: 1.3rem; --t-body: 1.0rem; --t-small: 0.875rem; --t-label: 0.6875rem; --t-micro: 0.5625rem; --leading-tight: 1.05; --leading-body: 1.55; --tracking-caps: 0.16em; /* ---- Space scale (4px base) ---- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; /* ---- Frame rails (S13.1945) --------------------------------------------- * * The LEFT RAIL width. Read by BOTH the top-bar brand box (.app-brand) and the * left menu (.app-menu) so their right-hand borders are the same x BY RULE, not * by coincidence — the two were 200px and content-width respectively, which is * why they never lined up (operator note #9). One number, two blocks, no drift. */ --rail-w: 200px; /* ---- Radii ---- */ --r-s: 0.625rem; --r-m: 0.875rem; --r-l: 1.125rem; --r-pill: 999px; /* ---- Elevation (cool shadows; gold glow reserved for the lit signal) ---- */ --shadow-card: 0 10px 40px color-mix(in srgb, var(--ground) 55%, transparent); --shadow-lit: 0 6px 26px color-mix(in srgb, var(--gold) 26%, transparent); --shadow-disc: 0 0 0 4px color-mix(in srgb, var(--gold) 22%, transparent), 0 4px 12px rgba(0,0,0,.45); /* ---- Layout ---- */ --measure: 1080px; /* A PROSE column. Do not use it to bound a label→figure ledger: a `.line` is `justify-content: space-between`, so the container width IS the gap, and a 1080px gap is a trip the eye cannot make. Capping a ledger card at --measure does not shrink that gap — it SETS it, which is why five sessions of cap fixes on butcher-season changed nothing anyone could see. Ledgers take --measure-ledger below. (S27.1218, owed `butcher-season-ledger-gap-is-the-variable-not-the-container`.) */ --measure-ledger: 32rem; --gutter: clamp(1rem, 4vw, 1.625rem); /* ---- Motion (restrained) ---- */ --ease: cubic-bezier(.22,.61,.36,1); --dur-1: .18s; --bob: 3.6s; --breathe: 4s; } /* ============================================================================ LIGHT VARIANT — [data-theme="light"] (dark is the default; this is the toggle). Overrides ONLY the DP-017 primitives; the compat layer follows automatically (every compat name resolves to var(--)). ============================================================================ */ :root[data-theme="light"] { /* Light-blue skin (operator direction, S12.11xx: "make it light — light blue + electric blue, not dark"). A cool light-blue wash on the grounds, white chrome for the raised surfaces, the electric-blue accent carried through. */ --ground: #EAF1FB; /* app ground · content pane — a soft light-blue wash */ --surface: #FFFFFF; /* top bar · left menu · raised chrome — clean white */ --surface-2: #E1EAF7; /* cards · active item · popovers — light-blue raised */ --surface-deep:#D6E2F2; /* below-ground band */ --accent: #1E6FE0; /* electric blue — active · selected · focus */ --accent-lit: #3B82F6; /* hover · raised */ --accent-dim: color-mix(in srgb, var(--accent) 14%, transparent); --ink: #0D1116; --ink-soft: #45536A; --ink-faint: #6A7789; --gold: #B08A2E; /* deepened for AA on the light ground */ --gold-soft: #C9A84C; --line: #CFDBEB; /* hairline — a cool light-blue border */ --line-strong: #B7C7DD; --line-gold: color-mix(in srgb, var(--gold) 30%, transparent); --teal: #1D9E75; /* The primary-act pair, inverted for the light ground. Both halves flip: the label goes WHITE (the light-skin accent is a DEEP blue, 4.77:1), and hover DEEPENS rather than lifts — --accent-lit (#3B82F6) is *lighter*, so reusing it here would DROP the button to 3.68:1 against the white surface. Hover must never reduce contrast. */ --ink-on-accent: #FFFFFF; /* white label on the deep accent — 4.77:1 */ --accent-strong: #1A5FC4; /* hover DEEPENS — 6.04:1 vs surface, 6.04:1 label */ /* --figure DEEPENS on light, exactly as --gold does (#C9A84C → #B08A2E): the dark skin's --accent (#1E6FE0 here) is only 4.19:1 on the light ground — it FAILS AA as text there. Declared as its own literal, NOT var(--accent-strong): a future hover retune must not silently move the figure. */ --figure: #1A5FC4; /* 5.31:1 ground · 6.04:1 surface · 4.98:1 surface-2 */ --shadow-card: 0 10px 40px color-mix(in srgb, #1E3A66 12%, transparent); } /* Honor the reader who asked the system to calm down. */ @media (prefers-reduced-motion: reduce) { :root { --bob: 0s; --breathe: 0s; --dur-1: .001s; } }