/* ================================================================ NeonTracker Design Tokens — TH.2 (2026-05-19) Single source of truth for visual design values. Components must consume tokens via var(--neon-*); themes remap the tokens here. See docs/DESIGN-TOKEN-REGISTRY.md for the full spec, rationale, and "how to add a theme" guide. Load order: this file is FIRST in head.html so :root tokens are available to every component CSS file that comes after. ================================================================ */ :root { /* ---- Colors — surfaces ----------------------------------- */ --neon-color-bg-base: #0d1014; --neon-color-bg-surface: #1a2030; --neon-color-bg-raised: #252d40; --neon-color-bg-sunken: #0a0e14; /* ---- Colors — text -------------------------------------- */ --neon-color-text-primary: #d8eff5; --neon-color-text-muted: #6890a8; --neon-color-text-bright: #ffffff; /* ---- Colors — accent + state ---------------------------- */ --neon-color-accent: #64dcde; --neon-color-accent-hover: #88e8eb; --neon-color-border: rgba(100, 200, 220, 0.35); --neon-color-border-strong: rgba(100, 200, 220, 0.65); --neon-color-danger: #ff5a5a; --neon-color-success: #78f08c; --neon-color-warning: #ffc850; /* ---- Colors — button surface ---------------------------- */ --neon-color-button-bg: rgba(15, 22, 30, 0.85); --neon-color-button-bg-hover: rgba(30, 50, 65, 0.95); --neon-color-button-bg-active: rgba(60, 130, 150, 0.85); --neon-color-button-text: #a8c5d6; --neon-color-button-border: rgba(100, 180, 200, 0.35); /* ---- Spacing scale -------------------------------------- */ --neon-spacing-xs: 2px; --neon-spacing-sm: 4px; --neon-spacing-md: 8px; --neon-spacing-lg: 12px; --neon-spacing-xl: 16px; --neon-spacing-2xl: 24px; /* ---- Radius scale --------------------------------------- TR.7 — Bumped for a softer, synth-device look in Neon. Classic theme overrides these back to 0/2 for ProTracker pixel-DNA. */ --neon-radius-sm: 5px; --neon-radius-md: 8px; --neon-radius-lg: 12px; --neon-radius-xl: 16px; /* ---- Shadow / Bezel ------------------------------------- TR.7 — Stronger raised bevel + accent halo so buttons + panels read as real synth-device chrome instead of flat outlines. */ --neon-shadow-button-raised: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 -2px 0 rgba(0, 0, 0, 0.32) inset, 0 2px 6px rgba(0, 0, 0, 0.35); --neon-shadow-button-pressed: inset 0 2px 4px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(100, 220, 222, 0.18); --neon-shadow-panel: 0 4px 14px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(100, 200, 220, 0.10); --neon-shadow-panel-glow: 0 0 18px rgba(100, 220, 222, 0.10), 0 4px 16px rgba(0, 0, 0, 0.50), inset 0 1px 0 rgba(255, 255, 255, 0.05); /* ---- Gradients ------------------------------------------ TR.7 — Subtle top-tinted accent gradient that gives surfaces a "lit from above by the accent LED" feel without overwhelming. */ --neon-gradient-panel: linear-gradient(180deg, rgba(100, 220, 222, 0.06) 0%, transparent 40%); --neon-gradient-button-raised: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.02) 45%, rgba(0, 0, 0, 0.15) 100%); /* ---- Font ----------------------------------------------- */ --neon-font-family-mono: "VT323", "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace; --neon-font-family-sans: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; /* TR.31 — Scale bumped +2px everywhere (Olé: workflow-strip text was unreadable at 11px). Affects every selector that consumes the --neon-font-size-* tokens, which is the canonical NeonTracker text scale. Theme-editor.css fallbacks (`var(--neon-font-size-sm, 11px)`) are only used if the token is missing — they don't override. */ --neon-font-size-xs: 12px; --neon-font-size-sm: 13px; --neon-font-size-md: 14px; --neon-font-size-lg: 16px; --neon-font-weight-bold: 600; --neon-font-letter-spacing-caps: 0.08em; /* ---- Motion --------------------------------------------- */ --neon-motion-fast: 0.1s ease; --neon-motion-medium: 0.2s ease; --neon-motion-slow: 0.4s ease; /* ---- Sizing --------------------------------------------- */ --neon-size-tap-target: 32px; --neon-size-toolbar-height: 40px; /* ---- Bay tokens (synth-control module shell) ----------- P2.b (2026-05-20) — moved out of synth-controls.css so themes can remap. Sand currently overrides the colour + radius pair. Geometric / transition primitives stay theme-agnostic. */ --bay-bg-panel: #0b1620; --bay-color-live: #ffd166; --bay-color-live-active: #06d6a0; --bay-radius-sm: 3px; --bay-radius-md: 4px; --bay-gap-tight: 3px; --bay-gap-row: 4px; --bay-gap-field: 6px; --bay-font-xs: 10px; --bay-font-sm: 11px; --bay-font-md: 13px; --bay-letter-tight: 0.03em; --bay-letter-wide: 0.06em; --bay-letter-widest: 0.08em; --bay-transition-base: background 90ms ease, border-color 90ms ease; --bay-transition-full: background 90ms ease, border-color 90ms ease, opacity 90ms ease; --bay-transition-motion: background 90ms ease, border-color 90ms ease, transform 90ms ease; } /* ================================================================ Classic theme — ProTracker-Neo-Retro Pastel-blue/grey palette, square corners, snappy motion. ================================================================ */ html[data-theme="classic"] { /* ---- Surfaces ------------------------------------------- */ --neon-color-bg-base: #9ea0c0; --neon-color-bg-surface: #bcbed8; --neon-color-bg-raised: #d4d4e8; --neon-color-bg-sunken: #7077a0; /* ---- Bay base-panel override ---------------------------- :root defines --bay-bg-panel: #0b1620 (neon dark) as the anchor for the synth-bay color-mix() slot backgrounds. Classic is a LIGHT theme with dark text (--role-text-primary #0a0e14), so inheriting the dark anchor made the bay slot + Copy-button labels black-on-dark-blue and unreadable (Sand already overrides this for the same reason). Anchor on a light lavender surface so the bay reads dark-on-light like the rest of the Classic theme. */ --bay-bg-panel: var(--neon-color-bg-raised); /* #d4d4e8 */ /* ---- Text ----------------------------------------------- */ --neon-color-text-primary: #0a0e14; --neon-color-text-muted: #2a3050; --neon-color-text-bright: #000000; /* ---- Accent + state ------------------------------------- */ --neon-color-accent: #1e2868; --neon-color-accent-hover: #3a4a90; --neon-color-border: #3a4060; --neon-color-border-strong: #0a0e14; --neon-color-danger: #a04040; --neon-color-success: #306030; --neon-color-warning: #806020; /* ---- Buttons (chunky pixel bezel, ProTracker hardware look) */ --neon-color-button-bg: #c5c5e0; --neon-color-button-bg-hover: #d8d8f0; --neon-color-button-bg-active: #a0a0c8; --neon-color-button-text: #0a0e14; --neon-color-button-border: #3a4060; /* ---- Radius: square / pixel-art friendly --------------- */ --neon-radius-sm: 2px; --neon-radius-md: 2px; --neon-radius-lg: 2px; --neon-radius-xl: 2px; /* ---- Shadow: 1-px bevels (no soft blur — retro) ------- */ --neon-shadow-button-raised: inset 1px 1px 0 rgba(255, 255, 255, 0.55), inset -1px -1px 0 rgba(0, 0, 0, 0.35), 1px 1px 0 rgba(0, 0, 0, 0.25); --neon-shadow-button-pressed: inset 1px 1px 0 rgba(0, 0, 0, 0.4), inset -1px -1px 0 rgba(255, 255, 255, 0.35); --neon-shadow-panel: 1px 1px 0 rgba(0, 0, 0, 0.25); --neon-shadow-panel-glow: inset 1px 1px 0 rgba(255, 255, 255, 0.35), inset -1px -1px 0 rgba(0, 0, 0, 0.30), 1px 1px 0 rgba(0, 0, 0, 0.25); /* ---- Gradients: flat for pixel-art DNA ----------------- */ --neon-gradient-panel: none; --neon-gradient-button-raised: none; /* ---- Font weight ---------------------------------------- */ --neon-font-family-mono: "VT323", "Topaz", "Courier New", monospace; --neon-font-weight-bold: 700; --neon-font-letter-spacing-caps: 0.04em; /* ---- Motion: snappy / retro (no easing) ---------------- */ --neon-motion-fast: 0s; --neon-motion-medium: 0s; --neon-motion-slow: 0s; } /* ================================================================ ░▒▓ LAYER 2 — Semantic Role Tokens (P1.c, 2026-05-20) ▓▒░ Source spec: docs/TOKEN-CATALOG.md (P1.b). 37 roles in 9 categories. Components consume var(--role-*) only; themes wire roles → physical values below. Layer model: Layer 1 — physical palette (per theme, above + theme files) e.g. --neon-color-bg-base, --sand-cream, --nz9-led-kick Layer 2 — semantic roles (this section) e.g. --role-surface-deck, --role-accent-record Layer 3 — components (every src/styles/*.css after this file) e.g. .module-card { background: var(--role-surface-panel); } Migration roadmap: P1.c — define roles here (this commit) P1.d — wire each theme block above to roles (verify visual diff = 0) P1.e — pilot migration: app-shell.css → var(--role-*) P1.f — bulk migration + pre-commit guard Phase 5 — WYSIWYG editor iterates this catalog ================================================================ */ /* ---------- Neon (default at :root) -------------------------- */ :root { /* Surfaces (6) */ --role-surface-page: var(--neon-color-bg-sunken); /* #0a0e14 */ --role-surface-deck: var(--neon-color-bg-base); /* #0d1014 */ --role-surface-panel: var(--neon-color-bg-surface); /* #1a2030 */ --role-surface-card: var(--neon-color-bg-raised); /* #252d40 */ --role-surface-sunken: var(--neon-color-bg-sunken); /* #0a0e14 */ --role-surface-display: var(--neon-color-bg-base); /* #0d1014 */ /* Button faces (4) */ --role-button-face-primary: var(--neon-color-button-bg); /* rgba(15,22,30,0.85) */ --role-button-face-secondary: var(--neon-color-bg-sunken); /* #0a0e14 */ --role-button-face-disabled: rgba(15, 22, 30, 0.45); --role-button-face-pressed: var(--neon-color-button-bg-active); /* rgba(60,130,150,0.85) */ /* Text / ink (5) */ --role-text-primary: var(--neon-color-text-primary); /* #d8eff5 */ --role-text-muted: var(--neon-color-text-muted); /* #6890a8 */ --role-text-bright: var(--neon-color-text-bright); /* #ffffff */ --role-text-on-dark: var(--neon-color-text-bright); /* #ffffff */ --role-text-on-accent: #071011; /* dark ink on saturated accent bg */ /* Lines / borders (3) */ --role-line: var(--neon-color-border); /* rgba(100,200,220,0.35) */ --role-line-strong: var(--neon-color-border-strong); /* rgba(100,200,220,0.65) */ --role-line-subtle: rgba(100, 200, 220, 0.18); /* Bezels (3) */ --role-bezel-highlight: rgba(255, 255, 255, 0.18); --role-bezel-shadow-inset: rgba(0, 0, 0, 0.32); --role-bezel-shadow-drop: rgba(0, 0, 0, 0.45); /* Accents (7) */ --role-accent-record: var(--neon-color-danger); /* #ff5a5a */ --role-accent-play: #ff8a3a; --role-accent-armed: var(--neon-color-warning); /* #ffc850 */ --role-accent-cursor: var(--neon-color-accent); /* #64dcde */ --role-accent-active: var(--neon-color-accent); /* #64dcde */ --role-accent-info: var(--neon-color-accent); /* #64dcde */ --role-accent-success: var(--neon-color-success); /* #78f08c */ /* LED slot colours (6) — 9zero9 drum palette, charter-locked colorway */ --role-led-kick: #ff8030; --role-led-snare: #ff3d55; --role-led-hat: #edc020; --role-led-clap: #ff50c8; --role-led-tom: #28d8cc; --role-led-perc: #ffa828; /* Arrangement track lanes (5) */ --role-track-drums: #d04030; --role-track-lane-1: #3aa6ff; --role-track-lane-2: #36d8c0; --role-track-lane-3: #7fdc6a; --role-track-lane-4: #d8c640; /* Canvas paint (4) */ --role-canvas-bg: var(--neon-color-bg-sunken); --role-canvas-grid-bar: rgba(100, 220, 222, 0.30); --role-canvas-grid-beat: rgba(100, 220, 222, 0.12); --role-canvas-playhead: #9fe870; } /* ---------- Classic theme — pastel ProTracker --------------- */ html[data-theme="classic"] { /* Surfaces */ --role-surface-page: var(--neon-color-bg-base); /* #9ea0c0 */ --role-surface-deck: var(--neon-color-bg-sunken); /* #7077a0 */ --role-surface-panel: var(--neon-color-bg-surface); /* #bcbed8 */ --role-surface-card: var(--neon-color-bg-raised); /* #d4d4e8 */ --role-surface-sunken: #8a90b8; --role-surface-display: var(--neon-color-bg-sunken); /* Button faces */ --role-button-face-primary: var(--neon-color-button-bg); /* #c5c5e0 */ --role-button-face-secondary: var(--neon-color-bg-sunken); /* #7077a0 */ --role-button-face-disabled: #b0b0c8; --role-button-face-pressed: var(--neon-color-button-bg-active); /* #a0a0c8 */ /* Text / ink */ --role-text-primary: var(--neon-color-text-primary); /* #0a0e14 */ --role-text-muted: var(--neon-color-text-muted); /* #2a3050 */ --role-text-bright: var(--neon-color-text-bright); /* #000 */ --role-text-on-dark: #ffffff; --role-text-on-accent: #0a0e14; /* dark ink on accent bg */ /* Lines / borders */ --role-line: var(--neon-color-border); /* #3a4060 */ --role-line-strong: var(--neon-color-border-strong); /* #0a0e14 */ --role-line-subtle: rgba(58, 64, 96, 0.45); /* Bezels */ --role-bezel-highlight: rgba(255, 255, 255, 0.55); --role-bezel-shadow-inset: rgba(0, 0, 0, 0.35); --role-bezel-shadow-drop: rgba(0, 0, 0, 0.25); /* Accents */ --role-accent-record: var(--neon-color-danger); /* #a04040 */ --role-accent-play: var(--neon-color-warning); /* #806020 */ --role-accent-armed: var(--neon-color-warning); --role-accent-cursor: var(--neon-color-accent); /* #1e2868 */ --role-accent-active: var(--neon-color-accent); --role-accent-info: var(--neon-color-accent); --role-accent-success: var(--neon-color-success); /* #306030 */ /* LEDs — same 9zero9 colorway across themes (charter-locked) */ --role-led-kick: #ff8030; --role-led-snare: #ff3d55; --role-led-hat: #edc020; --role-led-clap: #ff50c8; --role-led-tom: #28d8cc; --role-led-perc: #ffa828; /* Tracks */ --role-track-drums: #a04040; --role-track-lane-1: #1e2868; --role-track-lane-2: #2a6878; --role-track-lane-3: #306030; --role-track-lane-4: #806020; /* Canvas */ --role-canvas-bg: var(--neon-color-bg-sunken); --role-canvas-grid-bar: rgba(10, 14, 20, 0.40); --role-canvas-grid-beat: rgba(10, 14, 20, 0.18); --role-canvas-playhead: #a04040; } /* ---------- Sand theme — TR-909 cream/tan ------------------- */ /* Physical --sand-* tokens are defined in sand-theme.css (loads after this file). CSS vars resolve at use-time, so referencing them here is fine. */ html[data-theme="sand"] { /* Surfaces */ --role-surface-page: var(--sand-ink-muted); /* #5a4828 — workbench */ --role-surface-deck: var(--sand-panel-deep); /* #b5a478 */ --role-surface-panel: var(--sand-cream); /* #ede0bc */ --role-surface-card: var(--sand-cream-deep); /* #d4c095 */ --role-surface-sunken: var(--sand-cream-deep); --role-surface-display: var(--sand-panel-deep); /* Button faces */ --role-button-face-primary: var(--sand-cream); /* #ede0bc */ --role-button-face-secondary: var(--sand-button-face-off); /* #323030 */ --role-button-face-disabled: var(--sand-cream-shadow); /* #a48e68 */ --role-button-face-pressed: var(--sand-button-face-hot); /* #4a4040 */ /* Text / ink */ --role-text-primary: var(--sand-ink-primary); /* #2a1a08 */ --role-text-muted: var(--sand-ink-muted); /* #5a4828 */ --role-text-bright: var(--sand-ink-bright); /* #100804 */ --role-text-on-dark: var(--sand-cream); /* #ede0bc */ --role-text-on-accent: var(--sand-ink-bright); /* dark ink on saturated accent bg */ /* Lines / borders */ --role-line: var(--sand-panel-edge); /* #8a7a52 */ --role-line-strong: var(--sand-ink-primary); /* #2a1a08 */ --role-line-subtle: rgba(138, 122, 82, 0.45); /* Bezels */ --role-bezel-highlight: rgba(255, 248, 224, 0.55); --role-bezel-shadow-inset: rgba(60, 30, 8, 0.40); --role-bezel-shadow-drop: rgba(60, 30, 8, 0.25); /* Accents */ --role-accent-record: var(--sand-accent-red); /* #d91c22 */ --role-accent-play: var(--sand-accent-orange); /* #ff6418 */ --role-accent-armed: var(--sand-accent-amber); /* #f59818 */ --role-accent-cursor: var(--sand-accent-orange); /* #ff6418 */ --role-accent-active: var(--sand-accent-orange); --role-accent-info: var(--sand-accent-cobalt); /* #1e3a68 */ --role-accent-success: var(--sand-accent-olive); /* #4a7030 */ /* LEDs — Sand owns the 9zero9 colorway natively */ --role-led-kick: var(--sand-led-kick); --role-led-snare: var(--sand-led-snare); --role-led-hat: var(--sand-led-hat); --role-led-clap: var(--sand-led-clap); --role-led-tom: var(--sand-led-tom); --role-led-perc: var(--sand-led-perc); /* Tracks */ --role-track-drums: var(--sand-accent-red); --role-track-lane-1: var(--sand-accent-cobalt); --role-track-lane-2: var(--sand-led-tom); --role-track-lane-3: var(--sand-accent-olive); --role-track-lane-4: var(--sand-led-hat); /* Canvas */ --role-canvas-bg: var(--sand-panel); --role-canvas-grid-bar: rgba(138, 122, 82, 0.65); --role-canvas-grid-beat: rgba(138, 122, 82, 0.30); --role-canvas-playhead: var(--sand-accent-red); }