/* ========================================================================== SmartDocs 8.2 — Design Tokens Every colour is oklch so lightness stays perceptually even across hues and contrast can be verified mathematically. Theme resolution order: 1. :root complete light palette 2. prefers-color-scheme: dark applied unless data-theme="light" 3. :root[data-theme="dark"] explicit toggle always wins ========================================================================== */ :root { --radius: 0.625rem; /* Surfaces and text */ --background: oklch(1 0 0); --foreground: oklch(0.28 0.03 255); --card: oklch(1 0 0); --surface: oklch(0.982 0.004 240); --secondary: oklch(0.955 0.008 240); --secondary-foreground: oklch(0.32 0.04 255); --muted: oklch(0.958 0.007 240); --muted-foreground: oklch(0.47 0.022 250); --border: oklch(0.88 0.014 255); /* WCAG 2.1 SC 1.4.11 wants 3:1 for the boundary of anything that has to be identified as a control. An empty text field is identified by its border and nothing else, so --input carries that weight. --border stays light because it only ever draws dividers and card edges, where the content identifies the component and the line is a refinement. */ --input: oklch(0.62 0.022 255); --ring: oklch(0.47 0.16 258); /* Brand */ --primary: oklch(0.47 0.16 258); --primary-foreground: oklch(0.99 0.004 258); --primary-soft: oklch(0.955 0.025 258); --primary-pressed: oklch(0.4 0.16 258); --navy: oklch(0.235 0.052 258); --navy-foreground: oklch(0.97 0.008 240); --accent: oklch(0.93 0.032 200); --accent-foreground: oklch(0.3 0.06 220); /* Status */ --success: oklch(0.47 0.12 155); --success-soft: oklch(0.95 0.03 155); --warning: oklch(0.52 0.11 72); --warning-soft: oklch(0.96 0.04 72); --info: oklch(0.48 0.09 230); --info-soft: oklch(0.95 0.03 230); --destructive: oklch(0.52 0.19 27); --destructive-soft: oklch(0.96 0.03 27); /* Reserved exclusively for AI-touched interface. Never an ordinary action. Deep cyan, not violet. The violet oklch(0.47 0.22 293), which is #632ac1, was rejected. Nothing in this palette sits near hue 293. 5.51:1 against white in both directions. */ --ai: oklch(0.50 0.11 205); /* Text that sits on a filled, saturated surface: a primary button, a risk chip, a failed stage. It cannot be a literal white, because every one of those surfaces inverts to a light fill in dark mode and white on pale cyan measured 1.80 to 1. */ --on-strong: oklch(0.99 0.004 258); --ai-soft: oklch(0.965 0.022 200); --ai-line: oklch(0.80 0.075 200); --teal: oklch(0.5 0.088 187); /* Radius, all derived from one base */ --r-sm: calc(var(--radius) - 4px); --r-md: calc(var(--radius) - 2px); --r-lg: var(--radius); --r-xl: calc(var(--radius) + 4px); /* Elevation. Two levels at rest, one for anything that floats. */ --shadow-panel: 0 1px 2px oklch(0.3 0.05 250 / .05), 0 1px 3px oklch(0.3 0.05 250 / .06); --shadow-raised: 0 2px 4px oklch(0.3 0.05 250 / .06), 0 12px 28px -18px oklch(0.3 0.05 250 / .4); --shadow-pop: 0 4px 10px oklch(0.3 0.05 250 / .08), 0 18px 40px -20px oklch(0.3 0.05 250 / .45); /* Fixed measurements from the layout rules */ --topbar-h: 54px; --bottomnav-h: 60px; --gutter: 20px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --background: oklch(0.15 0.03 258); --foreground: oklch(0.97 0.01 258); --card: oklch(0.2 0.035 258); --surface: oklch(0.18 0.032 258); --secondary: oklch(0.28 0.035 258); --secondary-foreground: oklch(0.95 0.01 258); --muted: oklch(0.24 0.03 258); --muted-foreground: oklch(0.76 0.03 258); --border: oklch(1 0 0 / 15%); --input: oklch(0.62 0.03 258); --ring: oklch(0.75 0.14 258); --primary: oklch(0.72 0.14 258); --primary-foreground: oklch(0.16 0.03 258); --primary-soft: oklch(0.3 0.06 258); --primary-pressed: oklch(0.79 0.13 258); --navy: oklch(0.2 0.035 258); --navy-foreground: oklch(0.97 0.008 240); --accent: oklch(0.32 0.05 200); --accent-foreground: oklch(0.93 0.03 200); --success: oklch(0.78 0.15 155); --success-soft: oklch(0.29 0.06 155); --warning: oklch(0.83 0.14 78); --warning-soft: oklch(0.3 0.06 78); --info: oklch(0.78 0.11 230); --info-soft: oklch(0.29 0.05 230); --destructive: oklch(0.76 0.16 25); --destructive-soft: oklch(0.3 0.07 25); --ai: oklch(0.80 0.10 200); --on-strong: oklch(0.16 0.03 258); --ai-soft: oklch(0.27 0.045 200); --ai-line: oklch(0.47 0.075 200); --teal: oklch(0.75 0.09 187); --shadow-panel: 0 1px 2px oklch(0 0 0 / .3), 0 1px 3px oklch(0 0 0 / .35); --shadow-raised: 0 2px 4px oklch(0 0 0 / .35), 0 12px 28px -18px oklch(0 0 0 / .7); --shadow-pop: 0 4px 10px oklch(0 0 0 / .4), 0 18px 40px -20px oklch(0 0 0 / .75); } } :root[data-theme="dark"] { --background: oklch(0.15 0.03 258); --foreground: oklch(0.97 0.01 258); --card: oklch(0.2 0.035 258); --surface: oklch(0.18 0.032 258); --secondary: oklch(0.28 0.035 258); --secondary-foreground: oklch(0.95 0.01 258); --muted: oklch(0.24 0.03 258); --muted-foreground: oklch(0.76 0.03 258); --border: oklch(1 0 0 / 15%); --input: oklch(0.62 0.03 258); --ring: oklch(0.75 0.14 258); --primary: oklch(0.72 0.14 258); --primary-foreground: oklch(0.16 0.03 258); --primary-soft: oklch(0.3 0.06 258); --primary-pressed: oklch(0.79 0.13 258); --navy: oklch(0.2 0.035 258); --navy-foreground: oklch(0.97 0.008 240); --accent: oklch(0.32 0.05 200); --accent-foreground: oklch(0.93 0.03 200); --success: oklch(0.78 0.15 155); --success-soft: oklch(0.29 0.06 155); --warning: oklch(0.83 0.14 78); --warning-soft: oklch(0.3 0.06 78); --info: oklch(0.78 0.11 230); --info-soft: oklch(0.29 0.05 230); --destructive: oklch(0.76 0.16 25); --destructive-soft: oklch(0.3 0.07 25); --ai: oklch(0.80 0.10 200); --on-strong: oklch(0.16 0.03 258); --ai-soft: oklch(0.27 0.045 200); --ai-line: oklch(0.47 0.075 200); --teal: oklch(0.75 0.09 187); --shadow-panel: 0 1px 2px oklch(0 0 0 / .3), 0 1px 3px oklch(0 0 0 / .35); --shadow-raised: 0 2px 4px oklch(0 0 0 / .35), 0 12px 28px -18px oklch(0 0 0 / .7); --shadow-pop: 0 4px 10px oklch(0 0 0 / .4), 0 18px 40px -20px oklch(0 0 0 / .75); }