/* * tokens.css - the single silver/graphite token layer for SPARKS-SIX. * * One source of truth for neutrals, the graphite/silver accent, the vivid * six-dimension wheel (semantic, stays colored in both themes), type, paper * texture, and shadows. Light is the :root default; dark is keyed by * [data-theme="dark"] (set on pre-paint, and on component subtrees * such as the badge card). Values are lifted verbatim from the Claude Design * sources in /docs/design. * * Badge-only tokens (ring, seal, flourish) live in css/badge.css, not here. */ :root { /* neutrals */ --bg: #EDEFF2; --raised: #FFFFFF; --ink: #15181C; --ink60: #565D65; --ink40: #888F97; --line: rgba(20, 26, 32, 0.13); --line-soft: rgba(20, 26, 32, 0.07); --tint: #E2E6EA; /* accent: graphite in light */ --accent: #3E4854; --accent-hi: #67727E; --accent-ink: #FFFFFF; --accent-soft: rgba(62, 72, 84, 0.15); /* the growth-edge amber (semantic, stays warm in both themes) */ --build: #9A6B16; /* the vivid six-dimension wheel: fill/stroke color per letter */ --c-scope: #E8491B; --c-prompt: #E29400; --c-arch: #0FA958; --c-review: #0F7AE6; --c-keep: #7A4FE8; --c-score: #DB2680; /* darker per-dimension text variants: clear 4.5:1 on the 13% tint pills */ --pc-scope: #B93507; --pc-prompt: #8F6200; --pc-arch: #0A7A40; --pc-review: #0B5BB4; --pc-keep: #5C38C7; --pc-score: #AC1766; /* type */ --brand-display: "Playfair Display", Georgia, serif; --brand-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; /* surfaces: texture, glow, shadows, gradients */ --paper: repeating-linear-gradient(90deg, rgba(20, 26, 32, 0.032) 0 1px, rgba(20, 26, 32, 0) 1px 6px); --glow: radial-gradient(1100px 600px at 50% -12%, rgba(62, 72, 84, 0.09), transparent 60%); --emboss: 0 1px 0 rgba(255, 255, 255, 0.6); --shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), inset 0 0 0 1px rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(20, 26, 32, 0.07), 0 1px 2px rgba(20, 26, 32, 0.16), 0 11px 24px -15px rgba(20, 26, 32, 0.38); --shadow-sm: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(20, 26, 32, 0.15), 0 5px 12px -8px rgba(20, 26, 32, 0.30); --inset: inset 0 1px 3px rgba(20, 26, 32, 0.28), inset 0 0 0 1px rgba(20, 26, 32, 0.05), inset 0 -1px 0 rgba(255, 255, 255, 0.5); --btn-grad: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.07) 9%, rgba(255, 255, 255, 0) 17%), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 1px, rgba(0, 0, 0, 0.06) 1px 2px), linear-gradient(180deg, #5C6774 0%, #414C59 46%, #2B333D 100%); --btn-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 1px rgba(0, 0, 0, 0.26), inset 0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 1px rgba(20, 26, 32, 0.2), 0 8px 18px -8px rgba(62, 72, 84, 0.62); } :root[data-theme="dark"], [data-theme="dark"] { /* neutrals */ --bg: #121417; --raised: #23282E; --ink: #EEF1F4; --ink60: #9AA2AB; --ink40: #69727B; --line: rgba(170, 185, 200, 0.18); --line-soft: rgba(170, 185, 200, 0.09); --tint: #2A3038; /* accent: silver in dark (its tonal negative) */ --accent: #C9D2DB; --accent-hi: #EEF2F6; --accent-ink: #161C24; --accent-soft: rgba(201, 210, 219, 0.13); --build: #E0B45A; /* the wheel, lifted for dark */ --c-scope: #FF6B3D; --c-prompt: #FFB627; --c-arch: #31D97C; --c-review: #4DA3FF; --c-keep: #A08BFF; --c-score: #FF5CA8; --pc-scope: #FF9068; --pc-prompt: #FFCA61; --pc-arch: #63E5A0; --pc-review: #82BEFF; --pc-keep: #BCACFF; --pc-score: #FF8FC2; /* surfaces */ --paper: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, rgba(255, 255, 255, 0) 1px 6px); --glow: radial-gradient(1100px 600px at 50% -12%, rgba(201, 210, 219, 0.12), transparent 60%); --emboss: 0 1px 1px rgba(0, 0, 0, 0.55); --shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 0 0 1px rgba(255, 255, 255, 0.045), inset 0 -1px 0 rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.5), 0 15px 30px -16px rgba(0, 0, 0, 0.82); --shadow-sm: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 1px 2px rgba(0, 0, 0, 0.5), 0 7px 16px -10px rgba(0, 0, 0, 0.72); --inset: inset 0 2px 5px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(0, 0, 0, 0.4), inset 0 -1px 0 rgba(255, 255, 255, 0.05); --btn-grad: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 1px, rgba(0, 0, 0, 0.10) 1px 2px), linear-gradient(180deg, #E6EBF0 0%, #C0C9D2 50%, #9DA7B2 100%); --btn-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 1px rgba(20, 28, 36, 0.55), inset 0 0 0 1px rgba(0, 0, 0, 0.18), 0 1px 1px rgba(0, 0, 0, 0.5), 0 6px 14px -8px rgba(0, 0, 0, 0.6); } /* base: apply the token layer so any surface (and the bare shell) is themed */ * { box-sizing: border-box; } html, body { margin: 0; } body { background: var(--bg); background-image: var(--paper); color: var(--ink); font-family: var(--brand-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }