/* * Design tokens — admin/app theme (light + dark). * * Single source of truth for the semantic colour palette. Light values live on * :root; dark values override under :root[data-theme="dark"]. The * attribute is set by the anti-FOUC script in the shell * (standalone/templates/app.html) before first paint, and kept in sync at * runtime by ThemeProvider (web/js/react/theme/ThemeContext.tsx). * * This file only DECLARES variables — it applies none to elements — so adding * it is a visual no-op until components start consuming var(--token). * * Base scale: Tailwind `stone` (warm neutral). Accent: blue (single accent). */ :root { color-scheme: light; /* surfaces */ --surface-0: #ffffff; --surface-1: #fafaf9; --surface-2: #f5f5f4; --surface-accent: #eff6ff; --surface-cool: #f8fbff; --surface-cool-raised: #fbfdff; --surface-cool-metric: #fbfcfe; /* text */ --text-1: #1c1917; --text-2: #44403c; --text-3: #78716c; /* borders */ --border-1: #e7e5e4; --border-2: #d6d3d1; /* Deliberate 3:1+ boundary for controls and high-salience panels. */ --border-contrast: #928a83; /* accent */ --accent: #2563eb; --accent-hover: #1d4ed8; --accent-fg: #ffffff; /* status (foreground + subtle background + border) */ --success: #16a34a; --success-bg: #dcfce7; --success-border: #bbf7d0; --warning: #b45309; --warning-bg: #fef3c7; --warning-border: #fde68a; --danger: #dc2626; --danger-bg: #fee2e2; --danger-border: #fecaca; /* status "strong" — high-contrast text/icon on the subtle status fills (dark in light mode, light in dark mode) */ --success-strong: #166534; --warning-strong: #92400e; --danger-strong: #b91c1c; /* accent surface border */ --accent-border: #bfdbfe; /* categorical badge tones (text + subtle fill + border) */ --cyan-text: #0f766e; --cyan-bg: #ecfeff; --cyan-border: #a5f3fc; --cyan-solid-border: #0d5f59; --violet-text: #6d28d9; --violet-bg: #ede9fe; --violet-border: #c4b5fd; /* elevation */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08); --shadow-md: 0 10px 24px rgba(15, 23, 42, 0.12); --shadow-panel: 0 10px 28px rgba(15, 23, 42, 0.05); --shadow-raised: 0 18px 44px rgba(15, 23, 42, 0.08); --shadow-focus: 0 0 0 2px rgba(37, 99, 235, 0.18); } :root[data-theme="dark"] { color-scheme: dark; /* surfaces — warm near-black */ --surface-0: #1c1917; --surface-1: #24211f; --surface-2: #2e2a27; --surface-accent: #1f2a44; --surface-cool: #2e2a27; --surface-cool-raised: #2e2a27; --surface-cool-metric: #2e2a27; /* text */ --text-1: #f5f4f2; --text-2: #d6d3d0; --text-3: #a8a29e; /* borders */ --border-1: #33302c; --border-2: #454039; /* 3:1+ against both --surface-0 and --surface-2. */ --border-contrast: #7a746d; /* accent — brightened so it doesn't sink into the dark ground */ --accent: #3b82f6; --accent-hover: #60a5fa; --accent-fg: #ffffff; /* status — hue kept (semantic), backgrounds inverted to dark */ --success: #4ade80; --success-bg: #14532d; --success-border: #2f6b46; --warning: #fbbf24; --warning-bg: #422006; --warning-border: #6b5220; --danger: #f87171; --danger-bg: #450a0a; --danger-border: #6b2f2f; /* status "strong" — light text on the dark status fills */ --success-strong: #86efac; --warning-strong: #fcd34d; --danger-strong: #fca5a5; /* accent surface border */ --accent-border: #2f4a6b; /* categorical badge tones — bright text on dark fill */ --cyan-text: #2dd4bf; --cyan-bg: #0d2b2a; --cyan-border: #1f5450; --cyan-solid-border: #1f5450; --violet-text: #a78bfa; --violet-bg: #2a1a4d; --violet-border: #4a3a7a; /* elevation — blacker + deeper on the dark ground */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45); --shadow-md: 0 10px 24px rgba(0, 0, 0, 0.55); --shadow-panel: 0 10px 28px rgba(0, 0, 0, 0.40); --shadow-raised: 0 18px 44px rgba(0, 0, 0, 0.55); --shadow-focus: 0 0 0 2px rgba(96, 165, 250, 0.40); }