/* Nova design tokens — v1.1 (2026-09-16). The one token sheet for every aikho surface. Decision: docs/adr/0023-design-system-and-shared-ui-tiers.md · Spec: DESIGN.md. Two layers. The RAW layer (--aikho-*) is named by role and step, in oklch; nothing outside this file references it. The SEMANTIC layer keeps the shadcn names because the primitives consume them; components and Tailwind utilities read only these. A tenant repaints the product by supplying its own semantic sheet at runtime (ADR 0006 / 0050 D8): the names below are the contract and never change. Light on :root; dark as a class-bound variant (.dark; .aikho-dark is the alias kept through the migration). */ :root { /* ---------- raw: neutral (warm stone, hue 75) ---------- */ --aikho-n-50: oklch(0.980 0.004 75); --aikho-n-100: oklch(0.955 0.006 75); --aikho-n-200: oklch(0.915 0.008 75); --aikho-n-300: oklch(0.860 0.010 75); --aikho-n-400: oklch(0.720 0.012 75); --aikho-n-500: oklch(0.580 0.012 75); --aikho-n-600: oklch(0.470 0.012 75); --aikho-n-700: oklch(0.390 0.012 75); --aikho-n-800: oklch(0.290 0.012 75); --aikho-n-900: oklch(0.220 0.012 75); --aikho-n-950: oklch(0.160 0.010 75); /* ---------- raw: accent (cobalt, hue 262) ---------- */ --aikho-accent-100: oklch(0.94 0.035 262); --aikho-accent-200: oklch(0.88 0.060 262); --aikho-accent-300: oklch(0.80 0.100 262); --aikho-accent-400: oklch(0.72 0.150 262); --aikho-accent-500: oklch(0.56 0.200 262); --aikho-accent-600: oklch(0.48 0.200 262); --aikho-accent-700: oklch(0.41 0.180 262); /* ---------- raw: the brand's second tone (violet, hue 292) — brand scope only ---------- Not a semantic colour. Legal in the mark, the lockups, and the four provenance marks (DESIGN.md §1.1, §7). Never a button, never a status, never console chrome, never a chart series. Hue 292 because every other saturated region is claimed: 150 ok, 75 warn and the neutral, 25 bad, 205 info, 320 chart-4. */ --aikho-brand-2-100: oklch(0.94 0.035 292); --aikho-brand-2-200: oklch(0.90 0.055 292); --aikho-brand-2-300: oklch(0.80 0.110 292); --aikho-brand-2-400: oklch(0.68 0.195 292); /* the lens: its luminance is the geometric mean of the two bodies', so both edges come out equal */ --aikho-brand-2-500: oklch(0.54 0.190 292); --aikho-brand-2-600: oklch(0.45 0.185 292); --aikho-brand-2-700: oklch(0.38 0.155 292); /* ---------- raw: status hues (never the accent) ---------- */ --aikho-ok-fg: oklch(0.50 0.12 150); --aikho-ok-bg: oklch(0.95 0.04 150); --aikho-ok-line: oklch(0.87 0.08 150); --aikho-warn-fg: oklch(0.55 0.13 75); --aikho-warn-bg: oklch(0.96 0.05 80); --aikho-warn-line: oklch(0.88 0.10 80); --aikho-bad-fg: oklch(0.52 0.18 25); --aikho-bad-bg: oklch(0.95 0.03 25); --aikho-bad-line: oklch(0.86 0.07 25); --aikho-info-fg: oklch(0.50 0.10 205); --aikho-info-bg: oklch(0.95 0.03 205); --aikho-info-line: oklch(0.86 0.06 205); /* ---------- semantic: surfaces and text (shadcn names) ---------- */ --background: var(--aikho-n-50); --foreground: var(--aikho-n-950); --card: #ffffff; --card-foreground: var(--aikho-n-950); --popover: #ffffff; --popover-foreground: var(--aikho-n-950); --muted: var(--aikho-n-100); --muted-foreground: var(--aikho-n-600); --border: var(--aikho-n-200); --input: var(--aikho-n-300); /* ---------- semantic: action ---------- */ --primary: var(--aikho-accent-600); --primary-foreground: #ffffff; --secondary: var(--aikho-n-100); --secondary-foreground: var(--aikho-n-800); --accent: var(--aikho-accent-100); --accent-foreground: var(--aikho-accent-700); --destructive: var(--aikho-bad-fg); --destructive-foreground:#ffffff; --ring: var(--aikho-accent-500); /* ---------- semantic: brand (the mark and the wordmark; lib/ui/components/mark) ---------- */ --brand: var(--aikho-accent-600); --brand-2: var(--aikho-brand-2-500); --brand-foreground: #ffffff; /* ---------- semantic: the mark's three tones ---------- Two bodies and the lens between them (DESIGN.md §7). The lens is a FIXED violet on every ground; only the bodies invert (the dark set, [data-ground]). It sits at about 2.2:1 against each body, equally, which is under the 3:1 non-text floor on purpose: a logotype's internal edges are exempt, and a tone that clears 3:1 against the dark body vanishes into the pale one. Greyscale, 1-bit and print use the mono form. */ --mark-near: var(--aikho-accent-600); --mark-far: var(--aikho-accent-200); --mark-lens: var(--aikho-brand-2-400); /* ---------- semantic: provenance (violet where Nova acted) ---------- The four legal marks in DESIGN.md §1.1 read these and nothing else. There is deliberately no --provenance-solid and no --provenance-ring: violet never fills an interactive surface and never draws a focus boundary. */ --provenance: var(--aikho-brand-2-600); /* byline and authored-block text */ --provenance-line: var(--aikho-brand-2-500); /* the 2 px edge rule, the dotted underline */ --provenance-bg: var(--aikho-brand-2-100); /* tint — the site and decks only, never the console */ --provenance-bg-line: var(--aikho-brand-2-200); /* border of that tint */ --provenance-on-bg: var(--aikho-brand-2-700); /* text sitting on the tint */ /* ---------- semantic: status tones (fg / bg / line) ---------- */ --ok: var(--aikho-ok-fg); --ok-bg: var(--aikho-ok-bg); --ok-line: var(--aikho-ok-line); --warn: var(--aikho-warn-fg); --warn-bg: var(--aikho-warn-bg); --warn-line: var(--aikho-warn-line); --bad: var(--aikho-bad-fg); --bad-bg: var(--aikho-bad-bg); --bad-line: var(--aikho-bad-line); --info: var(--aikho-info-fg); --info-bg: var(--aikho-info-bg); --info-line: var(--aikho-info-line); /* ---------- semantic: admin sidebar ---------- */ --sidebar: var(--aikho-n-100); --sidebar-foreground: var(--aikho-n-950); --sidebar-primary: var(--aikho-accent-600); --sidebar-primary-foreground: #ffffff; --sidebar-accent: var(--aikho-accent-100); --sidebar-accent-foreground: var(--aikho-accent-700); --sidebar-border: var(--aikho-n-200); --sidebar-ring: var(--aikho-accent-500); /* ---------- semantic: charts (categorical, in order) ---------- */ --chart-1: var(--aikho-accent-600); --chart-2: oklch(0.60 0.10 195); --chart-3: oklch(0.72 0.14 75); --chart-4: oklch(0.55 0.14 320); --chart-5: var(--aikho-n-500); /* ---------- type ---------- */ --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; --font-arabic: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif; --fs-2xs: 10px; --lh-2xs: 14px; --fs-xs: 11px; --lh-xs: 16px; --fs-sm: 12px; --lh-sm: 16px; --fs-base:13px; --lh-base:18px; --fs-md: 15px; --lh-md: 22px; --fs-lg: 17px; --lh-lg: 24px; --fs-xl: 20px; --lh-xl: 26px; --fs-2xl: 26px; --lh-2xl: 32px; --fs-3xl: 32px; --lh-3xl: 38px; --tracking-display: -0.02em; --tracking-heading: -0.01em; --tracking-caps: 0.08em; /* ---------- radius ---------- */ --radius: 6px; /* shadcn base = md */ --radius-sm: 3px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 14px; /* ---------- elevation (ink at low alpha) ---------- */ --shadow-1: 0 1px 2px oklch(0.16 0.01 75 / 0.06); --shadow-2: 0 3px 10px oklch(0.16 0.01 75 / 0.08), 0 1px 2px oklch(0.16 0.01 75 / 0.05); --shadow-3: 0 12px 32px oklch(0.16 0.01 75 / 0.12), 0 2px 6px oklch(0.16 0.01 75 / 0.06); /* ---------- motion ---------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; /* ---------- density ---------- */ --row-compact: 36px; --row-comfortable: 44px; --control-compact: 32px; --control-comfortable: 40px; /* ---------- shell ---------- */ --appbar-h: 46px; /* the operator app bar (DESIGN.md §1.3) */ /* ---------- z-index ---------- */ --z-base: 0; --z-sticky: 10; --z-dropdown: 20; --z-sheet: 30; --z-dialog: 40; --z-toast: 50; } /* Dark: a class-bound variant for the surfaces that are dark (app bar, assistant pane, admin sidebar). Not a user toggle. The participant plane never carries it. */ .dark, .aikho-dark { --background: var(--aikho-n-950); --foreground: var(--aikho-n-50); --card: var(--aikho-n-900); --card-foreground: var(--aikho-n-50); --popover: var(--aikho-n-900); --popover-foreground: var(--aikho-n-50); --muted: var(--aikho-n-900); --muted-foreground: var(--aikho-n-400); --border: var(--aikho-n-800); --input: var(--aikho-n-700); --primary: var(--aikho-accent-400); --primary-foreground: var(--aikho-n-950); --secondary: var(--aikho-n-900); --secondary-foreground: var(--aikho-n-50); --accent: var(--aikho-n-800); --accent-foreground: var(--aikho-n-50); --destructive: oklch(0.66 0.17 25); --destructive-foreground:var(--aikho-n-950); --ring: var(--aikho-accent-400); --brand: var(--aikho-accent-400); --brand-2: var(--aikho-brand-2-400); --brand-foreground: var(--aikho-n-950); --mark-near: var(--aikho-n-50); --mark-far: var(--aikho-accent-300); --mark-lens: var(--aikho-brand-2-400); --provenance: var(--aikho-brand-2-300); --provenance-line: var(--aikho-brand-2-400); --provenance-bg: oklch(0.30 0.060 292); --provenance-bg-line: oklch(0.40 0.090 292); --provenance-on-bg: var(--aikho-brand-2-300); --ok: oklch(0.80 0.12 150); --ok-bg: oklch(0.30 0.04 150); --ok-line: oklch(0.40 0.06 150); --warn: oklch(0.82 0.13 80); --warn-bg: oklch(0.32 0.05 80); --warn-line: oklch(0.42 0.07 80); --bad: oklch(0.78 0.14 25); --bad-bg: oklch(0.32 0.06 25); --bad-line: oklch(0.42 0.08 25); --info: oklch(0.80 0.09 205); --info-bg: oklch(0.30 0.04 205); --info-line: oklch(0.40 0.06 205); --sidebar: var(--aikho-n-900); --sidebar-foreground: var(--aikho-n-50); --sidebar-primary: var(--aikho-accent-400); --sidebar-primary-foreground: var(--aikho-n-950); --sidebar-accent: var(--aikho-n-800); --sidebar-accent-foreground: var(--aikho-n-50); --sidebar-border: var(--aikho-n-800); --sidebar-ring: var(--aikho-accent-400); --chart-1: var(--aikho-accent-400); --chart-2: oklch(0.75 0.10 195); --chart-3: oklch(0.80 0.13 75); --chart-4: oklch(0.70 0.13 320); --chart-5: var(--aikho-n-400); --shadow-1: 0 1px 2px oklch(0 0 0 / 0.30); --shadow-2: 0 3px 10px oklch(0 0 0 / 0.35), 0 1px 2px oklch(0 0 0 / 0.25); --shadow-3: 0 12px 32px oklch(0 0 0 / 0.45), 0 2px 6px oklch(0 0 0 / 0.30); color-scheme: dark; } /* The mark on an ink ground that is not a .dark surface (an ink tile, a launcher) and on a filled cobalt plane (the app icon, the favicon): the bodies invert, the lens never does. These are the only rules outside the two sets that read a raw step, so the mark's own CSS reads nothing but the three --mark-* names. */ .on-ink, [data-ground="ink"] { --mark-near: var(--aikho-n-50); --mark-far: var(--aikho-accent-300); } .on-brand, [data-ground="brand"] { --mark-near: #ffffff; --mark-far: var(--aikho-accent-300); } html { font-family: var(--font-sans); } :lang(ar) { font-family: var(--font-arabic); } .font-mono, [class*="font-mono"] { font-family: var(--font-mono); } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; } }