/* * Canonical Clinical tokens for the control plane — loaded as a plain static * stylesheet *after* SvelteKit injects bundled CSS so these unlayered rules * override Tailwind v4's @layer properties snapshot of the same variables * (Tailwind resolves light-dark() at compile time otherwise; native light-dark * follows the html color-scheme from the cookie → transformPageChunk path). */ :root { --surface: light-dark(oklch(1 0 0), oklch(0.145 0.015 260)); --surface-raised: light-dark(oklch(1 0 0), oklch(0.178 0.02 260)); --surface-sunken: light-dark(oklch(0.985 0.001 286), oklch(0.205 0.012 260)); --surface-overlay: light-dark(oklch(1 0 0), oklch(0.178 0.02 260)); --surface-scrim: light-dark(oklch(0.141 0.005 286 / 0.5), oklch(0 0 0 / 0.6)); --ink: light-dark(oklch(0.18 0.005 286), oklch(0.985 0.002 260)); --ink-muted: light-dark(oklch(0.45 0.015 286), oklch(0.707 0.022 260)); --ink-faint: light-dark(oklch(0.62 0.012 286), oklch(0.55 0.018 260)); --ink-inverse: light-dark(oklch(1 0 0), oklch(0.145 0.015 260)); --accent: light-dark(oklch(0.21 0.006 286), oklch(0.985 0.002 260)); --accent-hover: oklch(from var(--accent) calc(l - 0.04) c h); --accent-pressed: oklch(from var(--accent) calc(l - 0.08) c h); --accent-muted: color-mix(in oklch, var(--surface), var(--accent) 8%); --accent-ink: light-dark(oklch(0.985 0.002 260), oklch(0.21 0.006 286)); --hover: color-mix(in oklch, transparent, var(--ink) 4%); --pressed: color-mix(in oklch, transparent, var(--ink) 8%); --selection-bg: color-mix(in oklch, transparent, var(--accent) 30%); --selection-ink: var(--ink); --link: var(--accent); --link-visited: oklch(from var(--accent) calc(l - 0.05) calc(c * 0.6) h); --border: light-dark(oklch(0.92 0.004 286), oklch(0.373 0.034 260)); --border-strong: light-dark(oklch(0.84 0.008 286), oklch(0.45 0.034 260)); --divider: color-mix(in oklch, transparent, var(--ink) 5%); --focus: var(--accent); --code-bg: var(--surface-sunken); --skeleton: color-mix(in oklch, transparent, var(--ink) 6%); --danger: oklch(0.577 0.245 27); --danger-ink: oklch(0.985 0.002 260); --warn: oklch(0.79 0.17 70); --warn-ink: oklch(0.2 0.1 60); --success: oklch(0.7 0.16 155); --success-ink: oklch(0.2 0.1 160); /* * Information state — semantic neutral-blue used by gated empty states, * advisory banners, and "this is a hint" surfaces. Spec §3.5; previously * declared in the design doc but missing from the canonical sheet. */ --info: light-dark(oklch(0.55 0.1 240), oklch(0.78 0.1 240)); --info-ink: light-dark(oklch(0.99 0.005 240), oklch(0.18 0.01 240)); /* * Soft border — for hairline dividers, dashed empty-state containers, * and any border whose role is "barely there." Replaces every authored * `color-mix(in oklch, var(--border) X%, transparent)` arbitrary value. */ --border-soft: light-dark( color-mix(in oklch, var(--border) 60%, transparent), color-mix(in oklch, var(--border) 50%, transparent) ); /* * Danger soft — for destructive cards / non-actionable danger surrounds * (Settings → Danger archive card border). Replaces another authored * arbitrary color-mix. */ --danger-soft: color-mix(in oklch, var(--danger) 35%, var(--border)); /* * Disabled fill — distinct from base `opacity-50` so disabled controls * read clearly on every surface (light or dark) instead of looking like * a faint primary. Pairs with --disabled-ink for readable label text. */ --disabled-bg: light-dark(oklch(0.95 0.003 286), oklch(0.27 0.012 260)); --disabled-ink: light-dark(oklch(0.65 0.012 286), oklch(0.55 0.018 260)); /* * Tabular numerals recipe — applied to any numeric display where rhythm * matters (stat cards, audit times, money). Pairs with `font-variant-numeric: * tabular-nums lining-nums` via the `.tabular` utility in app.css. */ --fn-tabular: "tnum" 1, "lnum" 1; /* * Input height — single source of truth for form rhythm. Inputs, textareas * (single-line view), selects, button[size="default"] all read this so the * New Resource form and Settings forms breathe identically. */ --input-height: 2.25rem; /* * Theme preview tokens — surface, ink, and accent triples used by the * NewStudyModal theme picker to render Aa swatches. These are honest * design-system entries, not ad-hoc palette literals. Persistence for * study theming ships with Brand in Phase 3; until then these tokens * stand in for the selectable themes. */ --preview-meridian-surface: oklch(0.98 0.01 280); --preview-meridian-ink: oklch(0.22 0.02 280); --preview-meridian-accent: oklch(0.45 0.18 295); --preview-clearwater-surface: oklch(0.97 0.015 210); --preview-clearwater-ink: oklch(0.25 0.02 210); --preview-clearwater-accent: oklch(0.55 0.13 210); --preview-foundry-surface: oklch(0.96 0.005 60); --preview-foundry-ink: oklch(0.2 0.01 60); --preview-foundry-accent: oklch(0.5 0.12 40); --radius: 0.625rem; --radius-sm: calc(var(--radius) - 0.25rem); --radius-md: calc(var(--radius) - 0.125rem); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 0.25rem); --radius-full: 9999px; /* * Spacing scale — explicit aliases derived from Tailwind v4's `--spacing` * base (0.25rem). We need these because scoped Svelte CSS uses * `var(--spacing-N)` directly, while Tailwind v4 only ships the single * `--spacing` base and generates utilities via `calc(--spacing * N)`. * Defining them as `calc()` keeps both layers in lockstep — change the * base once and every utility AND scoped style follows. * * Fractional steps use the dash form (`--spacing-0-5`); the dot form is * invalid in CSS custom-property identifiers. */ --spacing-0: 0; --spacing-0-5: calc(var(--spacing) * 0.5); --spacing-1: calc(var(--spacing) * 1); --spacing-1-5: calc(var(--spacing) * 1.5); --spacing-2: calc(var(--spacing) * 2); --spacing-2-5: calc(var(--spacing) * 2.5); --spacing-3: calc(var(--spacing) * 3); --spacing-3-5: calc(var(--spacing) * 3.5); --spacing-4: calc(var(--spacing) * 4); --spacing-5: calc(var(--spacing) * 5); --spacing-6: calc(var(--spacing) * 6); --spacing-7: calc(var(--spacing) * 7); --spacing-8: calc(var(--spacing) * 8); --spacing-10: calc(var(--spacing) * 10); --spacing-12: calc(var(--spacing) * 12); --spacing-16: calc(var(--spacing) * 16); }