/* THEME-01: the single theme token contract shared by all three pages (`/`, `/login`, `/app`). Loaded before styles/app.css and styles/site.css, which consume these custom properties but no longer declare their own copies. Two tiers of custom property: - "Invariant" tokens (brand accent, status colours, shape/elevation constants) are declared once in the base :root and never overridden per theme — they are the same across every preset. - "Themed" tokens (surfaces, borders, text, shadows, the editor-canvas trio) are redeclared in full by every `:root[data-theme="…"]` block below. tests/theme-tokens.test.js enforces that every theme defines the exact set the "light" block defines — a missing token is the characteristic failure mode this file exists to prevent (D29 -> THEME-01). `src/ui/theme.js` owns THEME_KEY ('etnogrid.theme') and the THEMES id list. A stored legacy 'light' / 'dark' value keeps resolving exactly as before; 'dark' has no block of its own because the base :root already holds the dark values (unattributed = dark, matching D29). */ :root { /* Invariant: brand accent (indigo / violet) */ --primary: #6366f1; --primary-hover: #7c83ff; --accent: #818cf8; --accent-hover: #a5b0ff; --accent-line: rgba(99, 102, 241, 0.4); /* Invariant: status */ --success: #22c55e; --danger: #f0556a; --warning: #f5a524; /* Invariant: shape / elevation constants */ --radius: 10px; --radius-sm: 7px; --radius-lg: 14px; --blur: blur(10px); --ring: 0 0 0 3px rgba(99,102,241,0.28); --tool-rail-button-width: 34px; /* Themed (dark — the default, unattributed ) */ --bg-base: #181e2d; --bg-app: #181e2d; --bg-surface: #222a3c; --bg-surface-2: #293245; --bg-panel: #222a3c; --bg-input: #1a2132; --border-color: rgba(255, 255, 255, 0.07); --border-strong: rgba(255, 255, 255, 0.13); --border-focus: #7c8cff; --text-main: #eceef3; --text-muted: #8b94a7; --text-dim: #5b6577; --secondary: #1f2736; --secondary-hover: #283143; --accent-soft: rgba(99, 102, 241, 0.16); --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 6px 18px rgba(0,0,0,0.35); --shadow-lg: 0 18px 48px rgba(0,0,0,0.5); /* Editor-canvas trio: the canvas steps AWAY from its panel toward neutral mid-gray (lighter than the panel here, darker in light themes), blue tint dropped so it reads as gray rather than blue-black. --editor-mesh is tuned per theme for a ~3.2:1 contrast ratio against --editor-bg (see V46-33). */ --editor-bg: #3e4146; --editor-mesh: #909090; --editor-guide: rgba(129,140,248,0.55); /* Public-site aliases (styles/site.css). Defined once — a var() reference recomputes with whichever themed value is active, so these never need to be repeated per theme block. */ --site-bg: var(--bg-base); --site-panel: var(--bg-surface); --site-border: var(--border-color); --site-text: var(--text-main); --site-muted: var(--text-muted); --site-primary: var(--primary); --site-primary-hover: var(--primary-hover); --site-danger: var(--danger); } /* D29 — light palette. Derived from the same tokens; applied when the system prefers light AND no manual override, or when data-theme="light" is set explicitly. A manual data-theme="dark" keeps the :root dark defaults above. */ :root[data-theme="light"] { --bg-base: #dfe2ec; --bg-app: #dfe2ec; --bg-surface: #eeeff1; --bg-surface-2: #e0e2e8; --bg-panel: #eeeff1; --bg-input: #eeeff1; --border-color: rgba(15,23,42,0.10); --border-strong: rgba(15,23,42,0.18); --border-focus: #6366f1; --text-main: #1a2130; --text-muted: #5b6577; --text-dim: #94a0b4; --secondary: #eef1f8; --secondary-hover: #e2e7f2; --accent-soft: rgba(99,102,241,0.14); --shadow-sm: 0 1px 2px rgba(15,23,42,0.10); --shadow-md: 0 6px 18px rgba(15,23,42,0.12); --shadow-lg: 0 18px 48px rgba(15,23,42,0.18); --editor-bg: #d3d5d9; --editor-mesh: #737373; --editor-guide: rgba(99,102,241,0.5); } @media (prefers-color-scheme: light) { :root:not([data-theme]) { --bg-base: #dfe2ec; --bg-app: #dfe2ec; --bg-surface: #eeeff1; --bg-surface-2: #e0e2e8; --bg-panel: #eeeff1; --bg-input: #eeeff1; --border-color: rgba(15,23,42,0.10); --border-strong: rgba(15,23,42,0.18); --border-focus: #6366f1; --text-main: #1a2130; --text-muted: #5b6577; --text-dim: #94a0b4; --secondary: #eef1f8; --secondary-hover: #e2e7f2; --accent-soft: rgba(99,102,241,0.14); --shadow-sm: 0 1px 2px rgba(15,23,42,0.10); --shadow-md: 0 6px 18px rgba(15,23,42,0.12); --shadow-lg: 0 18px 48px rgba(15,23,42,0.18); --editor-bg: #d3d5d9; --editor-mesh: #737373; --editor-guide: rgba(99,102,241,0.5); } } /* Sepia — warm light preset. */ :root[data-theme="sepia"] { --bg-base: #ede4cf; --bg-app: #ede4cf; --bg-surface: #f6eddb; --bg-surface-2: #e1d7c2; --bg-panel: #f6eddb; --bg-input: #f9f2e4; --border-color: rgba(92,66,32,0.14); --border-strong: rgba(92,66,32,0.24); --border-focus: #b45309; --text-main: #3a2c1a; --text-muted: #7a6650; --text-dim: #a3927a; --secondary: #efe3ca; --secondary-hover: #e6d7b8; --accent-soft: rgba(180,83,9,0.14); --shadow-sm: 0 1px 2px rgba(92,66,32,0.12); --shadow-md: 0 6px 18px rgba(92,66,32,0.15); --shadow-lg: 0 18px 48px rgba(92,66,32,0.2); --editor-bg: #d3cec5; --editor-mesh: #6f6f6f; --editor-guide: rgba(180,83,9,0.5); } /* Forest — green-tinted dark preset. */ :root[data-theme="forest"] { --bg-base: #1b2a1f; --bg-app: #1b2a1f; --bg-surface: #223628; --bg-surface-2: #283f33; --bg-panel: #223628; --bg-input: #1e3123; --border-color: rgba(180,255,200,0.08); --border-strong: rgba(180,255,200,0.15); --border-focus: #7c8cff; --text-main: #e7f3ea; --text-muted: #8fa899; --text-dim: #5c7267; --secondary: #1c2a20; --secondary-hover: #24352a; --accent-soft: rgba(99,102,241,0.16); --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 6px 18px rgba(0,0,0,0.35); --shadow-lg: 0 18px 48px rgba(0,0,0,0.5); --editor-bg: #3c443e; --editor-mesh: #929292; --editor-guide: rgba(129,140,248,0.55); } /* Contrast — high-contrast dark preset (near-black/white surfaces, stronger borders). */ :root[data-theme="contrast"] { --bg-base: #000000; --bg-app: #000000; --bg-surface: #0a0a0a; --bg-surface-2: #141414; --bg-panel: #0a0a0a; --bg-input: #000000; --border-color: rgba(255,255,255,0.25); --border-strong: rgba(255,255,255,0.45); --border-focus: #ffffff; --text-main: #ffffff; --text-muted: #d8d8d8; --text-dim: #a0a0a0; --secondary: #1a1a1a; --secondary-hover: #262626; --accent-soft: rgba(129,140,248,0.28); --shadow-sm: 0 1px 2px rgba(0,0,0,0.6); --shadow-md: 0 6px 18px rgba(0,0,0,0.55); --shadow-lg: 0 18px 48px rgba(0,0,0,0.7); --editor-bg: #141414; --editor-mesh: #666666; --editor-guide: rgba(129,140,248,0.75); } /* Theme toggle icon: show the icon for the theme you'd switch TO (the fast light/dark path). */ #btnToggleTheme .theme-ic-light { display: none; } #btnToggleTheme .theme-ic-dark { display: inline-flex; } :root[data-theme="light"] #btnToggleTheme .theme-ic-light { display: inline-flex; } :root[data-theme="light"] #btnToggleTheme .theme-ic-dark { display: none; } @media (prefers-color-scheme: light) { :root:not([data-theme]) #btnToggleTheme .theme-ic-light { display: inline-flex; } :root:not([data-theme]) #btnToggleTheme .theme-ic-dark { display: none; } }