/* ═══════════════════════════════════════════════════════════════════════════ The design system — THE palette, not a second one. Every value is copied out of design/app-v2/styles.css, the stylesheet the design app actually ships, so the two cannot drift by transcription. It was scoped to .app-v2 while the new screens were being built, so that the two systems could stand side by side. That is over: this is the application's palette now, and tokens.css maps the old names onto it so that all 396 screens wear it — including the ones not yet redrawn. TWO NAMES CHANGED SIDES, and they are the reason the bridge could not be a one-line alias: --accent is a pale TINT here and was THE fill in the old system. The old meaning now lives under --brand. --muted is a SURFACE here and was a TEXT colour in the old system. The old meaning now lives under --ink-muted. Nothing else collided. Both were renamed in app.css and components.css by exact string, 42 and 66 occurrences, so an old rule asking for a fill still gets a fill. Naming is shadcn's, which is what the design uses: --background is the page, --surface is what sits on it, and each colour carries a -foreground for the text that goes on top. That pairing is the point — it is why a badge cannot end up with unreadable text on it. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* One radius, not six. The old system had --r-card, --r-field, --r-dialog, --r-badge, --r-pill and --r-check; this design uses .375rem everywhere and a full round where something is a pill. */ --radius: .375rem; --background: oklch(98.1% .004 250); --foreground: oklch(21% .03 255); --surface: oklch(100% 0 0); --surface-foreground: oklch(21% .03 255); --card: oklch(100% 0 0); --card-foreground: oklch(21% .03 255); --popover: oklch(100% 0 0); --popover-foreground: oklch(21% .03 255); --primary: oklch(49% .078 210); --primary-foreground: oklch(99% .005 210); --secondary: oklch(95.5% .008 245); --secondary-foreground: oklch(30% .03 255); --muted: oklch(96.5% .006 245); --muted-foreground: oklch(53% .02 255); --accent: oklch(94% .03 205); --accent-foreground: oklch(32% .06 220); /* THREE semantic colours, not two. «signal» is amber and it is not a warning: it marks a document that wants attention — a draft, a hold, an unposted line. The old palette had --warn doing both jobs. */ --signal: oklch(68% .115 78); --signal-foreground: oklch(26% .05 60); --success: oklch(60% .11 158); --success-foreground: oklch(99% .005 160); --destructive: oklch(56% .19 26); --destructive-foreground: oklch(99% .004 20); --border: oklch(91.2% .009 245); --border-strong: oklch(85% .012 245); --field: oklch(90% .01 245); --ring: oklch(49% .078 210); --chart-1: oklch(49% .078 210); --chart-2: oklch(68% .1 195); --chart-3: oklch(76% .14 74); --chart-4: oklch(60% .11 158); --chart-5: oklch(44% .07 255); /* The rail is a full colour SET, not one value and a text colour. It has its own accent and its own border because it is a dark surface inside a light page, and nothing else on the page can supply those. */ --sidebar: oklch(30% .046 213); --sidebar-foreground: oklch(86% .012 250); --sidebar-primary: oklch(78% .06 200); --sidebar-primary-foreground: oklch(16% .03 258); --sidebar-accent: oklch(37% .045 213); --sidebar-accent-foreground: oklch(97% .005 250); --sidebar-border: oklch(39% .04 213); --sidebar-ring: oklch(66% .11 200); /* Two shadows, and both are used. The previous standard said «no shadows except on dialogs»; this one lifts a panel by a hair and floats a popover. */ --shadow-panel: 0 1px 2px oklch(24% .03 258/.06), 0 1px 0 oklch(24% .03 258/.04); --shadow-float: 0 12px 32px -12px oklch(24% .03 258/.28); --font-sans: 'IBM Plex Sans', 'IBM Plex Sans Arabic', 'Cairo', ui-sans-serif, system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; } /* ── dark ────────────────────────────────────────────────────────────────── Twenty tokens, and only twenty: the chart colours, the sidebar set and the shadows are deliberately shared. A rail that is dark in both themes needs no second definition, and a chart whose colours move with the theme is a chart nobody can compare against yesterday's screenshot. Three selectors because there are three states, not two: an operator who chose dark, one who chose nothing and runs a dark system, and the design's own .dark class so a crawled fragment can be dropped in and look right. An explicit «light» beats a dark system, which is why the media query is guarded rather than plain. */ :root[data-theme="dark"], body[data-theme="dark"], .dark { --background: oklch(19% .025 258); --foreground: oklch(95% .006 250); --surface: oklch(23.5% .028 258); --surface-foreground: oklch(95% .006 250); --card: oklch(23.5% .028 258); --card-foreground: oklch(95% .006 250); --popover: oklch(23.5% .028 258); --popover-foreground: oklch(95% .006 250); --primary: oklch(68% .11 200); --primary-foreground: oklch(17% .03 258); --secondary: oklch(29% .03 258); --secondary-foreground: oklch(95% .006 250); --muted: oklch(28% .028 258); --muted-foreground: oklch(72% .02 250); --accent: oklch(32% .04 210); --accent-foreground: oklch(95% .006 250); --border: oklch(100% 0 0/.12); --border-strong: oklch(100% 0 0/.2); --field: oklch(100% 0 0/.16); --ring: oklch(68% .11 200); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --background: oklch(19% .025 258); --foreground: oklch(95% .006 250); --surface: oklch(23.5% .028 258); --surface-foreground: oklch(95% .006 250); --card: oklch(23.5% .028 258); --card-foreground: oklch(95% .006 250); --popover: oklch(23.5% .028 258); --popover-foreground: oklch(95% .006 250); --primary: oklch(68% .11 200); --primary-foreground: oklch(17% .03 258); --secondary: oklch(29% .03 258); --secondary-foreground: oklch(95% .006 250); --muted: oklch(28% .028 258); --muted-foreground: oklch(72% .02 250); --accent: oklch(32% .04 210); --accent-foreground: oklch(95% .006 250); --border: oklch(100% 0 0/.12); --border-strong: oklch(100% 0 0/.2); --field: oklch(100% 0 0/.16); --ring: oklch(68% .11 200); } } /* ── the radius SCALE ───────────────────────────────────────────────────────── The design derives five radii from the one --radius (design styles.css:14-18); Sanad had the base value only, and call sites wrote their own «- 2px», which matches none of the design's steps. Derived, not restated, so changing --radius still moves every step together. */ :root { --radius-sm: calc(var(--radius) - 3px); --radius-md: calc(var(--radius) - 1px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --radius-2xl: calc(var(--radius) + 8px); }