/* indie10-tokens.css — THE SINGLE SOURCE OF TRUTH FOR HOW INDIE10 LOOKS. * ═══════════════════════════════════════════════════════════════════════ * * WHAT THIS IS * Every colour, radius, spacing step and motion timing the app is allowed * to use. Nothing else in the codebase should ever contain a raw colour. * Change a value here and it changes everywhere, at once, consistently. * * WHAT THIS IS NOT * A restyle. Every value below is the EXACT value the app already renders * today, lifted verbatim from src/renderer/index.html and the 22 renderer * modules. Adopting this file changes zero pixels — that is the whole * point, and it is machine-checked by scripts/token-contract.js. * * THE TWO GROUPS * 1. CANONICAL — names that already exist in index.html's :root and are * already used correctly in roughly a third of the codebase. Same * names, same values, moved here so there is one home. * 2. RECLAIMED — values used dozens of times with NO token at all. These * got names for the first time. Naming them does not change them. * * THE RULE FOR STAGE 1 * Reclaimed values are named, NOT corrected. #111827 does not belong to * the background ramp and #3fe0c8 competes with the accent — both are * preserved exactly as-is here. Fixing them is a Stage 2 decision that * changes how things look, and it must be seen and approved before it * happens. Stage 1 only builds the dial. It never turns it. */ :root { /* ── SURFACES ───────────────────────────────────────────────── A six-step ramp from deepest to lightest. Panels, wells, hovers. */ --bg: #08090d; /* app ground, welcome backdrop */ --bg2: #0d0f15; /* topbar, panels, status bar */ --bg3: #12151e; /* inputs, wells, inactive tabs */ --bg4: #171b26; /* hover state on chrome */ --bg5: #1d2231; /* pressed / raised */ --bg6: #232940; /* highest surface */ /* RECLAIMED — a slate used 18x that sits OUTSIDE the ramp above. Kept exactly as found; whether it should collapse into --bg3 is a Stage 2 call, not a silent edit. */ --bg-slate: #111827; /* ── HAIRLINES ──────────────────────────────────────────────── Borders and dividers, as white at three opacities. */ --rule: rgba(255,255,255,0.055); --rule2: rgba(255,255,255,0.10); --rule3: rgba(255,255,255,0.16); /* RECLAIMED — the two most-used raw hairlines (62x and 32x). They are NOT equal to --rule2/--rule, which is why they get their own names rather than being quietly rounded into them. */ --rule-10: rgba(255,255,255,.1); --rule-08: rgba(255,255,255,.08); --rule-12: rgba(255,255,255,.12); --rule-14: rgba(255,255,255,.14); --rule-04: rgba(255,255,255,.04); --rule-05: rgba(255,255,255,.05); --rule-07: rgba(255,255,255,.07); /* ── TEXT ───────────────────────────────────────────────────── Four canonical steps, plus three reclaimed ones the UI leans on heavily. Seven levels is more than a system needs — consolidating them is Stage 2. */ --text: #e8eaf0; /* primary */ --text-mid: #6b7280; /* secondary */ --text-dim: #2e3545; /* disabled / faintest */ --text-max: #fff; /* RECLAIMED 54x — pure white emphasis */ --text-soft: #9aa3b5; /* RECLAIMED 28x */ --text-muted: #5c6577; /* RECLAIMED 38x */ --text-bright:#d1d5db; /* RECLAIMED 10x */ /* ── ACCENTS ────────────────────────────────────────────────── ⚠ THE UNIFORMITY PROBLEM, MADE VISIBLE. Three unrelated accent families are live in the app right now: --blue #3b82f6 the documented "DevStudio accent", 33 uses --teal #3fe0c8 undocumented, no token until now, 60 uses ND10 #7cf5ff the rebrand's cyan (nd10-theme.css remaps --blue) The teal is used nearly twice as often as the official accent, which is why the interface reads as two apps wearing each other's clothes. All three are preserved verbatim here. Choosing ONE is the single highest-impact Stage 2 decision, and it is DJ's call, not mine. */ /* CHANNEL TOKENS — the accent appears at five different alpha levels across the codebase. Giving each one its own token (--blue-14, --blue-20, --blue-28 …) would mean five dials to keep in sync, which is the problem we are solving, not the fix. Instead the raw channels live here once and every translucent use derives from them: rgba(var(--accent-rgb), .28) One value to change, every alpha follows. Same for the two status colours that also appear at multiple alphas. */ --accent-rgb: 59, 130, 246; --green-rgb: 34, 197, 94; --red-rgb: 239, 68, 68; --amber-rgb: 245, 158, 11; --purple-rgb: 168, 85, 247; --blue: #3b82f6; --blue-d: rgba(var(--accent-rgb), 0.14); --blue-g: rgba(var(--accent-rgb), 0.28); --blue-30: rgba(var(--accent-rgb), .3); --teal: #3fe0c8; /* RECLAIMED 60x */ --teal-2: #6fe3e0; /* RECLAIMED 35x */ /* Folio sub-brand — deliberately separate. Indie10 and Folio are two real modes the app distinguishes; this is not drift. */ --gold: #C9A84C; --gold-d: rgba(201,168,76,0.13); --gold-g: rgba(201,168,76,0.25); --gold-30: rgba(201,168,76,.3); --gold-glow: 0 0 20px rgba(201,168,76,0.22); /* ── STATUS ─────────────────────────────────────────────────── Semantic, never decorative. Do not reuse these for styling. */ --green: #22c55e; --green-d: rgba(34,197,94,0.12); --green-30: rgba(34,197,94,.3); --amber: #f59e0b; --amber-d: rgba(245,158,11,0.12); --amber-30: rgba(245,158,11,.3); --red: #ef4444; --red-d: rgba(239,68,68,0.12); --cyan: #06b6d4; --purple: #a855f7; --mint: #5CE0B0; --coral: #ff5e5b; /* ── SHADOW WELLS ─────────────────────────────────────────────*/ --shade-50: rgba(0,0,0,.5); --shade-60: rgba(0,0,0,.6); /* ── TYPE ─────────────────────────────────────────────────────*/ --mono: 'JetBrains Mono', monospace; --ui: 'Syne', sans-serif; --serif: 'Playfair Display', serif; /* ── STRUCTURE ──────────────────────────────────────────────── Structural sizes. Changing these MOVES things — unlike everything above, these are not safe to experiment with. */ --topbar-h: 46px; --rail-w: 54px; --left-w: 268px; --right-w: 272px; --status-h: 24px; }