/* ============================================================ walkingtodo.ai · WTD brand tokens — "Indigo Ink" v2.1 ------------------------------------------------------------ SINGLE SOURCE OF TRUTH. Supersedes wtd-tokens v1, the interim v2, and the embedded block in wtd_brand_system_v2.html (which mirrors this file). If they ever disagree, this file wins. v2.1 (2026-06-09): + --wtd-white #ffffff — paper. Print ground + translucent panel fills on cream. NOT a screen surface (rule 10). + Light-surface extensions codified from the brief/finale deliverable: grey, hair, lav, lav-soft, status tints. + Two-surface semantic mappings: [data-theme] page-level, .wtd-light/.wtd-dark for mixed surfaces on one page (e.g. dark masthead over a cream brief body). + Print stylesheet (briefs print on white). ------------------------------------------------------------ System narrative: - LIGHT is the default surface — the judicial-brief read, what deliverables ship on. DARK is the control room. - Warm accent at two energies: COPPER at rest, AMBER lit. Gold is always lit and functional, never ornamental. - DUSK is the cool secondary — the gate/✗ side. The palette has no red on purpose; status tints in brief tables are the single scoped exception. - Body text is ink on light, cream-soft on dark. Color does the pointing, never the reading. Type: Fraunces — 500 running headings · 400/italic display · 900 logotype ONLY. JetBrains Mono — UI, labels, code. Brief body copy: Fraunces 400, 16.5px/1.64. ============================================================ */ :root { /* ---------- Core palette (locked, surface-independent) ---------- */ --wtd-field: #1a0b29; /* indigo ink — dark surface / ink on light */ --wtd-field-glow: #2a1240; /* raised dark / radial accent */ --wtd-indigo: #4B0082; /* brand spot — headings & links on light */ --wtd-amber: #e4b24c; /* LIT & FUNCTIONAL ONLY — hover/active/found*/ --wtd-copper: #B87333; /* resting accent — solid elements only */ --wtd-cream: #fbf1df; /* light surface / headings on dark */ --wtd-cream-soft: #ece2cf; /* body on dark / panels & wells on light */ --wtd-dusk: #a89cb0; /* cool secondary — gate/✗ marks, never red */ --wtd-muted: #9a8fb0; /* lavender-grey muted text — DARK ONLY */ --wtd-line: #322640; /* borders / dividers on dark */ /* ---------- Light-surface extensions (brief deliverables) ---------- */ --wtd-ink: #1a0b29; /* body text on light (field hue as ink) */ --wtd-grey: #6b6157; /* muted text — LIGHT ONLY */ --wtd-hair: #e3d7c0; /* hairline on cream */ --wtd-lav: #D7C8E8; /* table header fill */ --wtd-lav-soft: #ECE6F4; /* panel / code well */ --wtd-good-bg:#C3D199; --wtd-good-tx:#3F5E1C; /* brief tables only */ --wtd-mid-bg: #F0D17C; --wtd-mid-tx: #6E4310; /* brief tables only */ --wtd-bad-bg: #E5AB9B; --wtd-bad-tx: #8A2C1A; /* brief tables only */ /* ---------- Paper ---------- */ --wtd-white: #ffffff; /* print ground; translucent panels on cream */ /* ---------- Type ---------- */ --wtd-serif: 'Fraunces', Georgia, serif; --wtd-mono: 'JetBrains Mono', ui-monospace, monospace; } /* ---------- Semantic roles per surface ---------- Reference THESE in components, not raw palette tokens. Page-level: set data-theme on (light is default). Local mix: wrap a region in .wtd-dark / .wtd-light. */ :root, [data-theme="light"], .wtd-light { --wtd-bg: var(--wtd-cream); --wtd-bg-2: var(--wtd-cream-soft); --wtd-panel: rgba(255,255,255,.5); /* white as fill, on cream */ --wtd-tx: var(--wtd-ink); --wtd-mut: var(--wtd-grey); --wtd-head: var(--wtd-indigo); --wtd-hairline: var(--wtd-hair); --wtd-link-ul: var(--wtd-copper); --wtd-code-bg: var(--wtd-lav-soft); --wtd-code-tx: var(--wtd-ink); } [data-theme="dark"], .wtd-dark { --wtd-bg: var(--wtd-field); --wtd-bg-2: var(--wtd-field-glow); --wtd-panel: rgba(255,255,255,.03); --wtd-tx: var(--wtd-cream-soft); --wtd-mut: var(--wtd-muted); --wtd-head: var(--wtd-cream); --wtd-hairline: var(--wtd-line); --wtd-link-ul: var(--wtd-amber); --wtd-code-bg: rgba(0,0,0,.3); --wtd-code-tx: #d9d0e6; } /* ============================================================ USAGE RULES — keep these or you lose the discipline ------------------------------------------------------------ 1. BODY TEXT is ink on light, cream-soft on dark. Never indigo, never lavender, never copper. Color points, it doesn't read. 2. --wtd-indigo and --wtd-copper are EMPHASIS only — large, bold, or solid: headings, kickers, links, fills, rules, borders, buttons. They fail as small body text. 3. COPPER-ON-CREAM only as a SOLID element (fill, rule bar, link underline, chip). Never small type — too low-contrast. The easy mistake; called out separately. 4. LAVENDER-GREY (--wtd-muted) is DARK-FIELD only. Muted on light is --wtd-grey. Lavender on cream washes out. 5. BRASS IS FUNCTIONAL, NEVER ORNAMENTAL. Copper/amber mark a state, a clue, a node, an action. No foil, crowns, or filigree — control room, not Crown Royal. 6. ACCENT SEQUENCING: copper = rest, amber = lit/hover. Never both as competing static accents; sequence by state. 7. COOL STATE = --wtd-dusk. Gate/✗/halt marks use dusk, never a foreign red. Warm acts; cool gates. 8. STATUS TINTS (good/mid/bad) are data semantics in BRIEF TABLES ONLY — the muted terracotta is sanctioned there and nowhere else. Never a UI accent, button, or border. 9. FRAUNCES WEIGHTS: 500 running headings · 400 or italic for display moments · 900 strictly the logotype. Never 900 in content. Brief body = Fraunces 400, 16.5px/1.64; tool/lab body = Mono. 10. WHITE IS PAPER, NOT A SURFACE. On screen, light = cream; --wtd-white appears only as the PRINT ground and as translucent panel fill over cream. A flat #fff screen surface breaks the brand read. 11. On the DARK field, small text/links needing visible color lighten toward --wtd-muted or use --wtd-amber. True indigo is for light surfaces and the logotype. ============================================================ */ /* ---------- Drop-in helpers (delete if you only want tokens) ---------- */ .wtd-dark, .wtd-light { background: var(--wtd-bg); color: var(--wtd-tx); } .wtd-muted { color: var(--wtd-mut); } .wtd-heading { font-family: var(--wtd-serif); color: var(--wtd-head); font-weight: 500; } .wtd-display { font-family: var(--wtd-serif); color: var(--wtd-head); font-weight: 400; font-style: italic; } /* Kicker: small mono label, tight text-width brass underline. */ .wtd-kicker { display: inline-block; font-family: var(--wtd-mono); text-transform: uppercase; letter-spacing: .2em; font-size: .7rem; font-weight: 500; color: var(--wtd-tx); border-bottom: 2px solid var(--wtd-copper); padding-bottom: 4px; } /* Links: ink + brass underline on light; amber (lit) on dark. */ a.wtd-link, .wtd-light a { color: var(--wtd-tx); text-decoration: none; border-bottom: 2px solid var(--wtd-link-ul); } .wtd-dark a { color: var(--wtd-amber); text-decoration: none; } /* Button: copper rests, amber lights. */ .wtd-btn { font-family: var(--wtd-mono); font-weight: 500; background: var(--wtd-copper); color: var(--wtd-cream); border: 0; border-radius: 8px; padding: 8px 15px; cursor: pointer; } .wtd-btn:hover, .wtd-btn:focus-visible { background: var(--wtd-amber); color: var(--wtd-field); } /* Panels: raised card (dark), inset well (light), white-fill panel. */ .wtd-card { background: var(--wtd-bg-2); border: 1px solid var(--wtd-hairline); border-radius: 10px; } .wtd-well { background: var(--wtd-bg-2); border-radius: 10px; } .wtd-panel { background: var(--wtd-panel); border: 1px solid var(--wtd-hairline); border-radius: 10px; } /* Cool/gate chip — the ✗ side. Dusk, never red. */ .wtd-chip-gate { font-family: var(--wtd-mono); font-size: .7rem; color: var(--wtd-field); background: var(--wtd-dusk); border-radius: 6px; padding: 2px 8px; } /* Status chips — BRIEF TABLES ONLY (rule 8). */ .wtd-st { font-family: var(--wtd-mono); font-size: .65rem; font-weight: 700; border-radius: 4px; padding: 3px 8px; } .wtd-st-good { background: var(--wtd-good-bg); color: var(--wtd-good-tx); } .wtd-st-mid { background: var(--wtd-mid-bg); color: var(--wtd-mid-tx); } .wtd-st-bad { background: var(--wtd-bad-bg); color: var(--wtd-bad-tx); } /* ---------- Print: briefs collapse to paper ---------- */ @media print { :root, [data-theme="light"], [data-theme="dark"], .wtd-light, .wtd-dark { --wtd-bg: var(--wtd-white); --wtd-bg-2: var(--wtd-white); --wtd-panel: var(--wtd-white); --wtd-tx: var(--wtd-ink); --wtd-mut: var(--wtd-grey); --wtd-head: var(--wtd-indigo); --wtd-hairline: var(--wtd-hair); } body { background: var(--wtd-white); font-size: 10.5pt; line-height: 1.5; } }