@layer tokens { /* ============================================================================ Color tokens. One semantic custom property per palette value, defined with light-dark() so the same var() resolves correctly per color-scheme. Light values are the original hardcoded hex (light mode is unchanged); dark values are tuned for a dark surface. The theme toggle sets color-scheme via the [data-theme] attribute on ; the default is "system" (follows the OS). See controllers/theme_controller.js + the early-apply script in the layout. ========================================================================= */ :root { color-scheme: light dark; /* Neutrals — ink-on-paper; invert between light and dark. */ --c-white: light-dark(#ffffff, #161618); --c-gray-25: light-dark(#fafafa, #1a1a1c); --c-gray-50: light-dark(#f9fafb, #1c1c1f); --c-gray-100: light-dark(#f3f4f6, #232327); --c-gray-200: light-dark(#e5e7eb, #2e2e33); --c-gray-300: light-dark(#d1d5db, #3c3c43); --c-gray-400: light-dark(#9ca3af, #71757e); --c-gray-500: light-dark(#6b7280, #9097a1); --c-gray-600: light-dark(#4b5563, #aeb4bd); --c-gray-700: light-dark(#374151, #c8cdd5); --c-gray-800: light-dark(#1f2937, #dde1e7); --c-gray-900: light-dark(#111827, #e8eaee); --c-ink: light-dark(#111111, #ededee); /* Accent — blue; keep hue, brighten on dark. */ --c-accent: light-dark(#2563eb, #5b8def); --c-accent-400: light-dark(#60a5fa, #3b82f6); --c-accent-300: light-dark(#93c5fd, #2f5d96); --c-accent-200: light-dark(#bfdbfe, #1e3c63); --c-accent-100: light-dark(#dbeafe, #182f4d); --c-accent-50: light-dark(#eff6ff, #13263d); /* Danger — red. */ --c-danger: light-dark(#dc2626, #f06a6a); --c-danger-700: light-dark(#b91c1c, #ef5b5b); --c-danger-800: light-dark(#991b1b, #e84d4d); --c-danger-900: light-dark(#7f1d1d, #f3b0b0); --c-danger-200: light-dark(#fecaca, #5a2a2c); --c-danger-50: light-dark(#fef2f2, #2a1719); /* Success — green. */ --c-success: light-dark(#16a34a, #3ec46f); --c-success-800: light-dark(#166534, #a7e0bb); --c-success-900: light-dark(#14532d, #b6e6c6); --c-success-200: light-dark(#bbf7d0, #1e4d31); --c-success-50: light-dark(#f0fdf4, #132a1b); /* Warning — amber. */ --c-warning: light-dark(#d97706, #f0a020); --c-warning-700: light-dark(#b45309, #e8941a); --c-warning-800: light-dark(#92400e, #f0c070); --c-warning-900: light-dark(#78350f, #f3cd92); --c-warning-400: light-dark(#fbbf24, #d9a93a); --c-warning-300: light-dark(#fcd34d, #cfa23a); --c-warning-200: light-dark(#fed7aa, #5a3d1c); --c-warning-150: light-dark(#fef08a, #4a3f16); --c-warning-50: light-dark(#fffbeb, #2a2414); /* Thread — purple; the third annotation hue (editor-v2 design). */ --c-thread: light-dark(#7a3ea8, #c08adf); --c-thread-400: light-dark(#a172c4, #a86fd0); --c-thread-200: light-dark(#e4d3f2, #4a2f63); --c-thread-100: light-dark(#f0e6f8, #392350); /* Annotation accents — one hue per margin-card type: note (blue), character (amber), thread (purple). Cards, pills, icon badges, and prose decorations all read these so the type reads as the same color everywhere. */ --c-ann-note: var(--c-accent); --c-ann-note-edge: var(--c-accent-400); --c-ann-character: var(--c-warning-700); --c-ann-character-bg: var(--c-warning-150); --c-ann-character-edge: var(--c-warning-400); --c-ann-thread: var(--c-thread); --c-ann-thread-bg: var(--c-thread-100); --c-ann-thread-edge: var(--c-thread-400); /* Elevation shadow. */ --c-shadow: light-dark(rgba(17, 17, 17, 0.12), rgba(0, 0, 0, 0.55)); /* Non-color primitives — one place to tune. The literals these replace had already drifted (two mono stacks, 9 letter-spacings, three off-token shadows). */ --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; /* The book face. 030 referenced this token before it existed (library row titles fell back to the system sans, silently — PR #226..#227); defined once now, used everywhere the prose voice appears outside the manuscript canvas. */ --font-prose: "Newsreader", Georgia, "Times New Roman", serif; --shadow-card: 0 1px 3px var(--c-shadow); --shadow-float: 0 4px 12px var(--c-shadow); --shadow-pop: 0 8px 24px var(--c-shadow); --backdrop: rgba(0, 0, 0, 0.35); --t-fast: 150ms ease; --prose-w: 43.5rem; /* Hero measure: the reading width for non-editor content columns (library, dashboard, account, admin). Surfaces may override (the dashboard reads wider). The editor's measure preference swaps --prose-w via data-measure on the surface (see 040). */ --hero-w: 44rem; --ls-kicker: 0.04em; --ls-wide: 0.09em; } }