/* ────────────────────────────────────────────────────────────────────────── theme-dark.css — Dark theme (default; applies when has no data-theme). Two-tier design tokens per theme axis scope §1. TIER 1: Primitives — raw color values per theme. TIER 2: Semantics — named-by-USE references to primitives. Component CSS should reference SEMANTICS only. Old token names (--bg, --text, etc.) are temporarily aliased here for the transition until Phase D (component CSS migration) completes. ────────────────────────────────────────────────────────────────────────── */ :root, body:not([data-theme]) { /* Browser-native widget color scheme (number-input spinners, scrollbars, autofill) */ color-scheme: dark; /* ─────── TIER 1: PRIMITIVES ─────── */ /* Neutral scale (light → dark) */ --neutral-50: #f0f0f0; --neutral-100: #a8a8a8; --neutral-200: #686868; --neutral-300: #333333; --neutral-400: #282828; --neutral-500: #1e1e1e; --neutral-600: #181818; --neutral-700: #111111; --neutral-800: #0d0d0d; --neutral-900: #080808; /* Brand */ --brand-base: #09B040; /* CA_THEDRAL green (S64 G-12 ratified) */ --brand-emphasis: #F57D27; /* secondary accent orange (S64 G-12) */ /* Status (S64 G-12 ratified palette) */ --success: #09B040; --warning: #F57D27; --danger: #B01212; /* Per-strategy badge palette */ --strategy-1: #2dc98a; /* PYRAMID_DCA */ --strategy-2: #6ba3f5; /* SNIPER */ --strategy-3: #f57c2a; /* APE */ --strategy-4: #f06292; /* R1P2 */ --strategy-5: #ffd23f; /* RUNNER */ /* Cool blue accent (separate from brand green) */ --accent-blue: #6ba3f5; /* ─────── TIER 2: SEMANTICS ─────── */ /* Surfaces */ --surface-base: var(--neutral-900); /* page background */ --surface-raised: var(--neutral-800); /* cards */ --surface-elevated: var(--neutral-700); /* drawers, popovers */ --surface-overlay: var(--neutral-600); /* highest layer */ /* Borders */ --border-subtle: var(--neutral-400); --border-default: var(--neutral-400); --border-emphasis: var(--neutral-300); /* Text */ --text-primary: var(--neutral-50); --text-secondary: var(--neutral-100); --text-muted: var(--neutral-200); --text-on-accent: var(--neutral-900); /* Accent */ --accent: var(--accent-blue); --accent-emphasis: var(--accent-blue); /* Status text */ --text-success: var(--success); --text-warning: var(--warning); --text-danger: var(--danger); /* Status background tints */ --bg-success: rgba(9,176,64,0.15); --bg-warning: rgba(245,125,39,0.15); --bg-danger: rgba(176,18,18,0.15); /* Form inputs */ --input-bg: var(--surface-elevated); --input-border: var(--border-emphasis); --input-text: var(--text-primary); /* Action buttons */ --button-primary-bg: var(--brand-base); --button-primary-text: var(--neutral-900); --btn-add-bg: var(--surface-elevated); /* S66 — Dark uses elevated surface; Dusk/Retro Dark/Retro Light override to transparent per operator-deferred fix (c) */ /* Effects */ --overlay: rgba(0,0,0,0.6); --shadow: rgba(0,0,0,0.35); /* ─────── TRANSITIONAL ALIASES (component CSS migration pending Phase D) ─────── */ /* Old surface names */ --bg: var(--neutral-900); --bg2: var(--neutral-700); --bg3: var(--neutral-600); --bg4: var(--neutral-500); --card-bg: var(--neutral-800); /* Old border names */ --border: var(--neutral-400); --border2: var(--neutral-300); /* Old text names */ --text: var(--neutral-50); --text2: var(--neutral-100); --text3: var(--neutral-200); /* Old status / accent names */ --green: var(--success); --red: var(--danger); --yellow: var(--warning); /* F-14 alias preserved */ --accent-positive: var(--success); }