/* * Font faces live in the sibling fonts.css, which every shell that loads this * sheet also loads. Declaring them here too would be dead weight: this copy of * tokens.css is served by the desktop app and the web shell, where the fonts sit * at a bundle-local path, not at the site-root /fonts/ the marketing copy uses. */ /* * Pluripo design tokens. * * GENERATED — the block between the "tokens:generated" markers below is * emitted from design/tokens.json (the single machine-readable source of * truth, W3C DTCG) by design/generate.mjs, and is byte-identical to * marketing/src/styles/tokens.css. Do NOT hand-edit inside the markers: edit * design/tokens.json and run `pnpm run tokens:generate` (the same run * regenerates the marketing/extension surfaces too). `pnpm run tokens:check` * (also wired into CI) fails if any surface drifts. * * Direction: warm-neutral & calm, light + purple-tinted-dark. Violet (oklch * hue 300) is the brand default; a curated accent set (violet, ocean, teal, * amber, rose) recolors the accent slots per named theme. The always-dark gate * band stays violet in every theme. * * The raw ramps stay fixed; each named theme re-points --accent-* and swaps the * mode's semantic aliases (--color-*), status tones, and shadows. Switching is * driven by ; data-mode mirrors the resolved light/dark * for mode-only CSS; data-contrast="high" (or prefers-contrast: more) layers on * the high-contrast overlay. Legacy data-theme "light"/"dark"/"auto" and the * unset OS-follow (prefers-color-scheme) still resolve to violet light/dark. */ /* tokens:generated:start */ :root { /* ============================================================ * COLOR — raw ramps (oklch). Build interactive states from * these; don't reach for ad-hoc color literals in component CSS. * ============================================================ */ /* Brand default — violet (hue 300). 600 primary on light, 500 bright * on dark; ink is the near-black label on a bright fill. Headings use * neutral ink, not the accent. */ --violet-50: oklch(0.96 0.025 300); --violet-100: oklch(0.90 0.06 300); --violet-200: oklch(0.83 0.10 300); --violet-300: oklch(0.74 0.14 300); --violet-400: oklch(0.68 0.17 300); --violet-500: oklch(0.62 0.20 300); --violet-600: oklch(0.50 0.21 300); --violet-700: oklch(0.45 0.19 300); --violet-800: oklch(0.40 0.17 300); --violet-900: oklch(0.34 0.15 300); --violet-ink: oklch(0.15 0.02 300); /* Curated accents — same per-step L as violet so contrast parity holds. * A theme re-points --accent-* at one of these; --violet-* also stays * available for anything that must stay brand-violet (mark, gate band). */ --ocean-50: oklch(0.96 0.017 260); --ocean-100: oklch(0.90 0.044 260); --ocean-200: oklch(0.83 0.078 260); --ocean-300: oklch(0.74 0.125 260); --ocean-400: oklch(0.68 0.158 260); --ocean-500: oklch(0.62 0.192 260); --ocean-600: oklch(0.50 0.19 260); --ocean-700: oklch(0.45 0.171 260); --ocean-800: oklch(0.40 0.153 260); --ocean-900: oklch(0.34 0.13 260); --ocean-ink: oklch(0.15 0.02 260); --teal-50: oklch(0.96 0.025 190); --teal-100: oklch(0.90 0.06 190); --teal-200: oklch(0.83 0.1 190); --teal-300: oklch(0.74 0.119 190); --teal-400: oklch(0.68 0.11 190); --teal-500: oklch(0.62 0.1 190); --teal-600: oklch(0.50 0.08 190); --teal-700: oklch(0.45 0.072 190); --teal-800: oklch(0.40 0.064 190); --teal-900: oklch(0.34 0.055 190); --teal-ink: oklch(0.15 0.02 190); --amber-50: oklch(0.96 0.025 70); --amber-100: oklch(0.90 0.06 70); --amber-200: oklch(0.83 0.1 70); --amber-300: oklch(0.74 0.14 70); --amber-400: oklch(0.68 0.137 70); --amber-500: oklch(0.62 0.125 70); --amber-600: oklch(0.50 0.1 70); --amber-700: oklch(0.45 0.09 70); --amber-800: oklch(0.40 0.08 70); --amber-900: oklch(0.34 0.068 70); --amber-ink: oklch(0.15 0.02 70); --rose-50: oklch(0.96 0.018 15); --rose-100: oklch(0.90 0.048 15); --rose-200: oklch(0.83 0.089 15); --rose-300: oklch(0.74 0.14 15); --rose-400: oklch(0.68 0.17 15); --rose-500: oklch(0.62 0.2 15); --rose-600: oklch(0.50 0.187 15); --rose-700: oklch(0.45 0.168 15); --rose-800: oklch(0.40 0.149 15); --rose-900: oklch(0.34 0.127 15); --rose-ink: oklch(0.15 0.02 15); /* Light neutrals — warm (hue ~70–95). Surfaces low, ink high. */ --neutral-0: oklch(1 0 0); --neutral-50: oklch(0.985 0.004 95); --neutral-100: oklch(0.965 0.005 95); --neutral-200: oklch(0.92 0.005 95); --neutral-300: oklch(0.90 0.006 90); --neutral-400: oklch(0.86 0.008 90); --neutral-500: oklch(0.55 0.012 70); --neutral-600: oklch(0.50 0.012 70); --neutral-700: oklch(0.40 0.01 70); --neutral-800: oklch(0.30 0.01 70); --neutral-900: oklch(0.24 0.008 70); --neutral-950: oklch(0.22 0.008 70); /* Dark neutrals — purple-tinted (hue 300). Ink low, surfaces high. */ --neutral-d-0: oklch(0.98 0.005 100); --neutral-d-50: oklch(0.95 0.005 100); --neutral-d-100: oklch(0.92 0.005 100); --neutral-d-200: oklch(0.78 0.01 300); --neutral-d-300: oklch(0.70 0.012 300); --neutral-d-400: oklch(0.62 0.012 300); --neutral-d-500: oklch(0.50 0.012 300); --neutral-d-600: oklch(0.34 0.016 300); --neutral-d-700: oklch(0.31 0.016 300); --neutral-d-800: oklch(0.265 0.018 300); --neutral-d-900: oklch(0.225 0.016 300); --neutral-d-950: oklch(0.18 0.014 300); /* Back-compat single status aliases (prefer the per-state tones below). */ --status-error: oklch(0.48 0.16 27); --status-success: oklch(0.40 0.12 150); --status-warning: oklch(0.48 0.09 75); /* ============================================================ * COLOR — semantic aliases (violet-light default) + status tones. * Use these in component styles; ramps are the implementation. * --accent-* is re-pointed per theme; here it tracks violet. * Status tones always pair with a label + dot — never color alone. * ============================================================ */ --accent-50: var(--violet-50); --accent-100: var(--violet-100); --accent-200: var(--violet-200); --accent-300: var(--violet-300); --accent-400: var(--violet-400); --accent-500: var(--violet-500); --accent-600: var(--violet-600); --accent-700: var(--violet-700); --accent-800: var(--violet-800); --accent-900: var(--violet-900); --accent-ink: var(--violet-ink); --color-page-bg: var(--neutral-50); --color-surface: var(--neutral-0); --color-surface-raised: var(--neutral-100); --color-text-primary: var(--neutral-900); --color-text-secondary: var(--neutral-600); --color-text-faint: var(--neutral-500); --color-rule: var(--neutral-200); --color-border: var(--neutral-300); --color-link: var(--accent-600); --color-link-hover: var(--accent-800); --color-brand: var(--accent-600); --color-brand-hover: var(--accent-700); --color-on-brand: var(--neutral-0); --color-accent: var(--accent-500); --color-selection-bg: var(--accent-50); --color-selection-text: var(--accent-900); --color-brand-mark-bg: var(--violet-600); --color-brand-mark-fg: var(--neutral-0); --status-building-bg: oklch(0.95 0.03 255); --status-building-text: oklch(0.42 0.13 255); --status-building-dot: oklch(0.58 0.13 255); --status-live-bg: oklch(0.94 0.04 150); --status-live-text: oklch(0.40 0.12 150); --status-live-dot: oklch(0.55 0.14 150); --status-checking-bg: oklch(0.95 0.05 85); --status-checking-text: oklch(0.48 0.09 75); --status-checking-dot: oklch(0.66 0.11 80); --status-error-bg: oklch(0.95 0.035 30); --status-error-text: oklch(0.48 0.16 27); --status-error-dot: oklch(0.57 0.17 27); --status-stopped-bg: oklch(0.94 0.004 90); --status-stopped-text: oklch(0.46 0.01 70); --status-stopped-dot: oklch(0.60 0.012 70); --shadow-sm: 0 1px 2px oklch(0.20 0.01 300 / 0.06); --shadow-md: 0 6px 20px oklch(0.50 0.21 300 / 0.10); --shadow-lg: 0 24px 64px oklch(0.15 0.01 300 / 0.40); /* Focus-ring width — widened by the high-contrast overlay. */ --focus-ring-width: 2px; /* ============================================================ * GATE BAND — the one surviving always-dark moment (sign-in / * brand gate). Dark in BOTH themes, so not remapped below. * ============================================================ */ --band-bg: var(--neutral-d-950); --band-surface: var(--neutral-d-900); --band-text: oklch(0.98 0.005 100); --band-text-muted: oklch(0.74 0.018 300); --band-brand: oklch(0.66 0.20 300); --band-border: oklch(0.30 0.03 300); --band-glow-radial: radial-gradient(120% 80% at 50% -10%, oklch(0.55 0.22 300 / 0.35), transparent 58%); --glow-violet: 0 0 40px oklch(0.60 0.21 300 / 0.55); --glow-violet-sm: 0 0 24px oklch(0.60 0.21 300 / 0.40); /* ============================================================ * TYPE — three voices: Space Grotesk (display), Hanken Grotesk * (body/UI), JetBrains Mono (code + uppercase eyebrow labels). * ============================================================ */ --font-display: "Space Grotesk", -apple-system, system-ui, sans-serif; --font-sans: "Hanken Grotesk", -apple-system, system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.1875rem; --text-xl: 1.375rem; --text-2xl: 1.875rem; --text-3xl: 2.25rem; --text-4xl: 3rem; --text-5xl: 3.375rem; --text-6xl: 4.5rem; --leading-tight: 1.05; --leading-snug: 1.2; --leading-normal: 1.6; --leading-relaxed: 1.7; --tracking-tight: -0.03em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-eyebrow: 0.14em; --measure-narrow: 32rem; --measure: 40rem; --measure-wide: 52rem; /* ============================================================ * SPACING — 4px-based scale * ============================================================ */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; /* ============================================================ * RADIUS, BORDERS, SHADOWS — hairline borders, modest rounding, * big radii only on large cards/dialogs. Shadows are faint. * ============================================================ */ --radius-xs: 6px; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-pill: 999px; --radius-circle: 50%; --border-hairline: 1px solid var(--color-rule); --border-default: 1px solid var(--color-border); } /* ============================================================ * NAMED THEMES — accent × mode. Each block re-points --accent-* and * swaps the mode's semantic aliases, status tones, and shadows; the * raw ramps and the always-dark gate band stay fixed. The two violet * blocks also match the legacy data-theme="light"/"dark" values. * ============================================================ */ :root[data-theme="violet-light"], :root[data-theme="light"] { --accent-50: var(--violet-50); --accent-100: var(--violet-100); --accent-200: var(--violet-200); --accent-300: var(--violet-300); --accent-400: var(--violet-400); --accent-500: var(--violet-500); --accent-600: var(--violet-600); --accent-700: var(--violet-700); --accent-800: var(--violet-800); --accent-900: var(--violet-900); --accent-ink: var(--violet-ink); --color-page-bg: var(--neutral-50); --color-surface: var(--neutral-0); --color-surface-raised: var(--neutral-100); --color-text-primary: var(--neutral-900); --color-text-secondary: var(--neutral-600); --color-text-faint: var(--neutral-500); --color-rule: var(--neutral-200); --color-border: var(--neutral-300); --color-link: var(--accent-600); --color-link-hover: var(--accent-800); --color-brand: var(--accent-600); --color-brand-hover: var(--accent-700); --color-on-brand: var(--neutral-0); --color-accent: var(--accent-500); --color-selection-bg: var(--accent-50); --color-selection-text: var(--accent-900); --color-brand-mark-bg: var(--violet-600); --color-brand-mark-fg: var(--neutral-0); --status-building-bg: oklch(0.95 0.03 255); --status-building-text: oklch(0.42 0.13 255); --status-building-dot: oklch(0.58 0.13 255); --status-live-bg: oklch(0.94 0.04 150); --status-live-text: oklch(0.40 0.12 150); --status-live-dot: oklch(0.55 0.14 150); --status-checking-bg: oklch(0.95 0.05 85); --status-checking-text: oklch(0.48 0.09 75); --status-checking-dot: oklch(0.66 0.11 80); --status-error-bg: oklch(0.95 0.035 30); --status-error-text: oklch(0.48 0.16 27); --status-error-dot: oklch(0.57 0.17 27); --status-stopped-bg: oklch(0.94 0.004 90); --status-stopped-text: oklch(0.46 0.01 70); --status-stopped-dot: oklch(0.60 0.012 70); --shadow-sm: 0 1px 2px oklch(0.20 0.01 300 / 0.06); --shadow-md: 0 6px 20px oklch(0.50 0.21 300 / 0.10); --shadow-lg: 0 24px 64px oklch(0.15 0.01 300 / 0.40); } :root[data-theme="violet-dark"], :root[data-theme="dark"] { --accent-50: var(--violet-50); --accent-100: var(--violet-100); --accent-200: var(--violet-200); --accent-300: var(--violet-300); --accent-400: var(--violet-400); --accent-500: var(--violet-500); --accent-600: var(--violet-600); --accent-700: var(--violet-700); --accent-800: var(--violet-800); --accent-900: var(--violet-900); --accent-ink: var(--violet-ink); --color-page-bg: var(--neutral-d-950); --color-surface: var(--neutral-d-900); --color-surface-raised: var(--neutral-d-800); --color-text-primary: var(--neutral-d-50); --color-text-secondary: var(--neutral-d-300); --color-text-faint: var(--neutral-d-400); --color-rule: var(--neutral-d-700); --color-border: var(--neutral-d-600); --color-link: var(--accent-300); --color-link-hover: var(--accent-500); --color-brand: var(--accent-500); --color-brand-hover: var(--accent-400); --color-on-brand: var(--accent-ink); --color-accent: var(--accent-400); --color-selection-bg: var(--accent-800); --color-selection-text: var(--neutral-d-0); --color-brand-mark-bg: var(--violet-500); --color-brand-mark-fg: var(--violet-ink); --status-building-bg: oklch(0.32 0.07 255); --status-building-text: oklch(0.84 0.10 255); --status-building-dot: oklch(0.72 0.13 255); --status-live-bg: oklch(0.30 0.07 150); --status-live-text: oklch(0.86 0.12 150); --status-live-dot: oklch(0.74 0.14 150); --status-checking-bg: oklch(0.34 0.06 80); --status-checking-text: oklch(0.88 0.10 85); --status-checking-dot: oklch(0.80 0.12 80); --status-error-bg: oklch(0.33 0.08 27); --status-error-text: oklch(0.86 0.11 27); --status-error-dot: oklch(0.68 0.16 27); --status-stopped-bg: oklch(0.28 0.012 300); --status-stopped-text: oklch(0.78 0.01 300); --status-stopped-dot: oklch(0.70 0.012 300); --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.40); --shadow-md: 0 6px 22px oklch(0 0 0 / 0.35); --shadow-lg: 0 24px 64px oklch(0 0 0 / 0.60); } :root[data-theme="ocean-light"] { --accent-50: var(--ocean-50); --accent-100: var(--ocean-100); --accent-200: var(--ocean-200); --accent-300: var(--ocean-300); --accent-400: var(--ocean-400); --accent-500: var(--ocean-500); --accent-600: var(--ocean-600); --accent-700: var(--ocean-700); --accent-800: var(--ocean-800); --accent-900: var(--ocean-900); --accent-ink: var(--ocean-ink); --color-page-bg: var(--neutral-50); --color-surface: var(--neutral-0); --color-surface-raised: var(--neutral-100); --color-text-primary: var(--neutral-900); --color-text-secondary: var(--neutral-600); --color-text-faint: var(--neutral-500); --color-rule: var(--neutral-200); --color-border: var(--neutral-300); --color-link: var(--accent-600); --color-link-hover: var(--accent-800); --color-brand: var(--accent-600); --color-brand-hover: var(--accent-700); --color-on-brand: var(--neutral-0); --color-accent: var(--accent-500); --color-selection-bg: var(--accent-50); --color-selection-text: var(--accent-900); --color-brand-mark-bg: var(--violet-600); --color-brand-mark-fg: var(--neutral-0); --status-building-bg: oklch(0.95 0.03 255); --status-building-text: oklch(0.42 0.13 255); --status-building-dot: oklch(0.58 0.13 255); --status-live-bg: oklch(0.94 0.04 150); --status-live-text: oklch(0.40 0.12 150); --status-live-dot: oklch(0.55 0.14 150); --status-checking-bg: oklch(0.95 0.05 85); --status-checking-text: oklch(0.48 0.09 75); --status-checking-dot: oklch(0.66 0.11 80); --status-error-bg: oklch(0.95 0.035 30); --status-error-text: oklch(0.48 0.16 27); --status-error-dot: oklch(0.57 0.17 27); --status-stopped-bg: oklch(0.94 0.004 90); --status-stopped-text: oklch(0.46 0.01 70); --status-stopped-dot: oklch(0.60 0.012 70); --shadow-sm: 0 1px 2px oklch(0.20 0.01 300 / 0.06); --shadow-md: 0 6px 20px oklch(0.50 0.21 300 / 0.10); --shadow-lg: 0 24px 64px oklch(0.15 0.01 300 / 0.40); } :root[data-theme="ocean-dark"] { --accent-50: var(--ocean-50); --accent-100: var(--ocean-100); --accent-200: var(--ocean-200); --accent-300: var(--ocean-300); --accent-400: var(--ocean-400); --accent-500: var(--ocean-500); --accent-600: var(--ocean-600); --accent-700: var(--ocean-700); --accent-800: var(--ocean-800); --accent-900: var(--ocean-900); --accent-ink: var(--ocean-ink); --color-page-bg: var(--neutral-d-950); --color-surface: var(--neutral-d-900); --color-surface-raised: var(--neutral-d-800); --color-text-primary: var(--neutral-d-50); --color-text-secondary: var(--neutral-d-300); --color-text-faint: var(--neutral-d-400); --color-rule: var(--neutral-d-700); --color-border: var(--neutral-d-600); --color-link: var(--accent-300); --color-link-hover: var(--accent-500); --color-brand: var(--accent-500); --color-brand-hover: var(--accent-400); --color-on-brand: var(--accent-ink); --color-accent: var(--accent-400); --color-selection-bg: var(--accent-800); --color-selection-text: var(--neutral-d-0); --color-brand-mark-bg: var(--violet-500); --color-brand-mark-fg: var(--violet-ink); --status-building-bg: oklch(0.32 0.07 255); --status-building-text: oklch(0.84 0.10 255); --status-building-dot: oklch(0.72 0.13 255); --status-live-bg: oklch(0.30 0.07 150); --status-live-text: oklch(0.86 0.12 150); --status-live-dot: oklch(0.74 0.14 150); --status-checking-bg: oklch(0.34 0.06 80); --status-checking-text: oklch(0.88 0.10 85); --status-checking-dot: oklch(0.80 0.12 80); --status-error-bg: oklch(0.33 0.08 27); --status-error-text: oklch(0.86 0.11 27); --status-error-dot: oklch(0.68 0.16 27); --status-stopped-bg: oklch(0.28 0.012 300); --status-stopped-text: oklch(0.78 0.01 300); --status-stopped-dot: oklch(0.70 0.012 300); --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.40); --shadow-md: 0 6px 22px oklch(0 0 0 / 0.35); --shadow-lg: 0 24px 64px oklch(0 0 0 / 0.60); } :root[data-theme="teal-light"] { --accent-50: var(--teal-50); --accent-100: var(--teal-100); --accent-200: var(--teal-200); --accent-300: var(--teal-300); --accent-400: var(--teal-400); --accent-500: var(--teal-500); --accent-600: var(--teal-600); --accent-700: var(--teal-700); --accent-800: var(--teal-800); --accent-900: var(--teal-900); --accent-ink: var(--teal-ink); --color-page-bg: var(--neutral-50); --color-surface: var(--neutral-0); --color-surface-raised: var(--neutral-100); --color-text-primary: var(--neutral-900); --color-text-secondary: var(--neutral-600); --color-text-faint: var(--neutral-500); --color-rule: var(--neutral-200); --color-border: var(--neutral-300); --color-link: var(--accent-600); --color-link-hover: var(--accent-800); --color-brand: var(--accent-600); --color-brand-hover: var(--accent-700); --color-on-brand: var(--neutral-0); --color-accent: var(--accent-500); --color-selection-bg: var(--accent-50); --color-selection-text: var(--accent-900); --color-brand-mark-bg: var(--violet-600); --color-brand-mark-fg: var(--neutral-0); --status-building-bg: oklch(0.95 0.03 255); --status-building-text: oklch(0.42 0.13 255); --status-building-dot: oklch(0.58 0.13 255); --status-live-bg: oklch(0.94 0.04 150); --status-live-text: oklch(0.40 0.12 150); --status-live-dot: oklch(0.55 0.14 150); --status-checking-bg: oklch(0.95 0.05 85); --status-checking-text: oklch(0.48 0.09 75); --status-checking-dot: oklch(0.66 0.11 80); --status-error-bg: oklch(0.95 0.035 30); --status-error-text: oklch(0.48 0.16 27); --status-error-dot: oklch(0.57 0.17 27); --status-stopped-bg: oklch(0.94 0.004 90); --status-stopped-text: oklch(0.46 0.01 70); --status-stopped-dot: oklch(0.60 0.012 70); --shadow-sm: 0 1px 2px oklch(0.20 0.01 300 / 0.06); --shadow-md: 0 6px 20px oklch(0.50 0.21 300 / 0.10); --shadow-lg: 0 24px 64px oklch(0.15 0.01 300 / 0.40); } :root[data-theme="teal-dark"] { --accent-50: var(--teal-50); --accent-100: var(--teal-100); --accent-200: var(--teal-200); --accent-300: var(--teal-300); --accent-400: var(--teal-400); --accent-500: var(--teal-500); --accent-600: var(--teal-600); --accent-700: var(--teal-700); --accent-800: var(--teal-800); --accent-900: var(--teal-900); --accent-ink: var(--teal-ink); --color-page-bg: var(--neutral-d-950); --color-surface: var(--neutral-d-900); --color-surface-raised: var(--neutral-d-800); --color-text-primary: var(--neutral-d-50); --color-text-secondary: var(--neutral-d-300); --color-text-faint: var(--neutral-d-400); --color-rule: var(--neutral-d-700); --color-border: var(--neutral-d-600); --color-link: var(--accent-300); --color-link-hover: var(--accent-500); --color-brand: var(--accent-500); --color-brand-hover: var(--accent-400); --color-on-brand: var(--accent-ink); --color-accent: var(--accent-400); --color-selection-bg: var(--accent-800); --color-selection-text: var(--neutral-d-0); --color-brand-mark-bg: var(--violet-500); --color-brand-mark-fg: var(--violet-ink); --status-building-bg: oklch(0.32 0.07 255); --status-building-text: oklch(0.84 0.10 255); --status-building-dot: oklch(0.72 0.13 255); --status-live-bg: oklch(0.30 0.07 150); --status-live-text: oklch(0.86 0.12 150); --status-live-dot: oklch(0.74 0.14 150); --status-checking-bg: oklch(0.34 0.06 80); --status-checking-text: oklch(0.88 0.10 85); --status-checking-dot: oklch(0.80 0.12 80); --status-error-bg: oklch(0.33 0.08 27); --status-error-text: oklch(0.86 0.11 27); --status-error-dot: oklch(0.68 0.16 27); --status-stopped-bg: oklch(0.28 0.012 300); --status-stopped-text: oklch(0.78 0.01 300); --status-stopped-dot: oklch(0.70 0.012 300); --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.40); --shadow-md: 0 6px 22px oklch(0 0 0 / 0.35); --shadow-lg: 0 24px 64px oklch(0 0 0 / 0.60); } :root[data-theme="amber-light"] { --accent-50: var(--amber-50); --accent-100: var(--amber-100); --accent-200: var(--amber-200); --accent-300: var(--amber-300); --accent-400: var(--amber-400); --accent-500: var(--amber-500); --accent-600: var(--amber-600); --accent-700: var(--amber-700); --accent-800: var(--amber-800); --accent-900: var(--amber-900); --accent-ink: var(--amber-ink); --color-page-bg: var(--neutral-50); --color-surface: var(--neutral-0); --color-surface-raised: var(--neutral-100); --color-text-primary: var(--neutral-900); --color-text-secondary: var(--neutral-600); --color-text-faint: var(--neutral-500); --color-rule: var(--neutral-200); --color-border: var(--neutral-300); --color-link: var(--accent-600); --color-link-hover: var(--accent-800); --color-brand: var(--accent-600); --color-brand-hover: var(--accent-700); --color-on-brand: var(--neutral-0); --color-accent: var(--accent-500); --color-selection-bg: var(--accent-50); --color-selection-text: var(--accent-900); --color-brand-mark-bg: var(--violet-600); --color-brand-mark-fg: var(--neutral-0); --status-building-bg: oklch(0.95 0.03 255); --status-building-text: oklch(0.42 0.13 255); --status-building-dot: oklch(0.58 0.13 255); --status-live-bg: oklch(0.94 0.04 150); --status-live-text: oklch(0.40 0.12 150); --status-live-dot: oklch(0.55 0.14 150); --status-checking-bg: oklch(0.95 0.05 85); --status-checking-text: oklch(0.48 0.09 75); --status-checking-dot: oklch(0.66 0.11 80); --status-error-bg: oklch(0.95 0.035 30); --status-error-text: oklch(0.48 0.16 27); --status-error-dot: oklch(0.57 0.17 27); --status-stopped-bg: oklch(0.94 0.004 90); --status-stopped-text: oklch(0.46 0.01 70); --status-stopped-dot: oklch(0.60 0.012 70); --shadow-sm: 0 1px 2px oklch(0.20 0.01 300 / 0.06); --shadow-md: 0 6px 20px oklch(0.50 0.21 300 / 0.10); --shadow-lg: 0 24px 64px oklch(0.15 0.01 300 / 0.40); } :root[data-theme="amber-dark"] { --accent-50: var(--amber-50); --accent-100: var(--amber-100); --accent-200: var(--amber-200); --accent-300: var(--amber-300); --accent-400: var(--amber-400); --accent-500: var(--amber-500); --accent-600: var(--amber-600); --accent-700: var(--amber-700); --accent-800: var(--amber-800); --accent-900: var(--amber-900); --accent-ink: var(--amber-ink); --color-page-bg: var(--neutral-d-950); --color-surface: var(--neutral-d-900); --color-surface-raised: var(--neutral-d-800); --color-text-primary: var(--neutral-d-50); --color-text-secondary: var(--neutral-d-300); --color-text-faint: var(--neutral-d-400); --color-rule: var(--neutral-d-700); --color-border: var(--neutral-d-600); --color-link: var(--accent-300); --color-link-hover: var(--accent-500); --color-brand: var(--accent-500); --color-brand-hover: var(--accent-400); --color-on-brand: var(--accent-ink); --color-accent: var(--accent-400); --color-selection-bg: var(--accent-800); --color-selection-text: var(--neutral-d-0); --color-brand-mark-bg: var(--violet-500); --color-brand-mark-fg: var(--violet-ink); --status-building-bg: oklch(0.32 0.07 255); --status-building-text: oklch(0.84 0.10 255); --status-building-dot: oklch(0.72 0.13 255); --status-live-bg: oklch(0.30 0.07 150); --status-live-text: oklch(0.86 0.12 150); --status-live-dot: oklch(0.74 0.14 150); --status-checking-bg: oklch(0.34 0.06 80); --status-checking-text: oklch(0.88 0.10 85); --status-checking-dot: oklch(0.80 0.12 80); --status-error-bg: oklch(0.33 0.08 27); --status-error-text: oklch(0.86 0.11 27); --status-error-dot: oklch(0.68 0.16 27); --status-stopped-bg: oklch(0.28 0.012 300); --status-stopped-text: oklch(0.78 0.01 300); --status-stopped-dot: oklch(0.70 0.012 300); --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.40); --shadow-md: 0 6px 22px oklch(0 0 0 / 0.35); --shadow-lg: 0 24px 64px oklch(0 0 0 / 0.60); } :root[data-theme="rose-light"] { --accent-50: var(--rose-50); --accent-100: var(--rose-100); --accent-200: var(--rose-200); --accent-300: var(--rose-300); --accent-400: var(--rose-400); --accent-500: var(--rose-500); --accent-600: var(--rose-600); --accent-700: var(--rose-700); --accent-800: var(--rose-800); --accent-900: var(--rose-900); --accent-ink: var(--rose-ink); --color-page-bg: var(--neutral-50); --color-surface: var(--neutral-0); --color-surface-raised: var(--neutral-100); --color-text-primary: var(--neutral-900); --color-text-secondary: var(--neutral-600); --color-text-faint: var(--neutral-500); --color-rule: var(--neutral-200); --color-border: var(--neutral-300); --color-link: var(--accent-600); --color-link-hover: var(--accent-800); --color-brand: var(--accent-600); --color-brand-hover: var(--accent-700); --color-on-brand: var(--neutral-0); --color-accent: var(--accent-500); --color-selection-bg: var(--accent-50); --color-selection-text: var(--accent-900); --color-brand-mark-bg: var(--violet-600); --color-brand-mark-fg: var(--neutral-0); --status-building-bg: oklch(0.95 0.03 255); --status-building-text: oklch(0.42 0.13 255); --status-building-dot: oklch(0.58 0.13 255); --status-live-bg: oklch(0.94 0.04 150); --status-live-text: oklch(0.40 0.12 150); --status-live-dot: oklch(0.55 0.14 150); --status-checking-bg: oklch(0.95 0.05 85); --status-checking-text: oklch(0.48 0.09 75); --status-checking-dot: oklch(0.66 0.11 80); --status-error-bg: oklch(0.95 0.035 30); --status-error-text: oklch(0.48 0.16 27); --status-error-dot: oklch(0.57 0.17 27); --status-stopped-bg: oklch(0.94 0.004 90); --status-stopped-text: oklch(0.46 0.01 70); --status-stopped-dot: oklch(0.60 0.012 70); --shadow-sm: 0 1px 2px oklch(0.20 0.01 300 / 0.06); --shadow-md: 0 6px 20px oklch(0.50 0.21 300 / 0.10); --shadow-lg: 0 24px 64px oklch(0.15 0.01 300 / 0.40); } :root[data-theme="rose-dark"] { --accent-50: var(--rose-50); --accent-100: var(--rose-100); --accent-200: var(--rose-200); --accent-300: var(--rose-300); --accent-400: var(--rose-400); --accent-500: var(--rose-500); --accent-600: var(--rose-600); --accent-700: var(--rose-700); --accent-800: var(--rose-800); --accent-900: var(--rose-900); --accent-ink: var(--rose-ink); --color-page-bg: var(--neutral-d-950); --color-surface: var(--neutral-d-900); --color-surface-raised: var(--neutral-d-800); --color-text-primary: var(--neutral-d-50); --color-text-secondary: var(--neutral-d-300); --color-text-faint: var(--neutral-d-400); --color-rule: var(--neutral-d-700); --color-border: var(--neutral-d-600); --color-link: var(--accent-300); --color-link-hover: var(--accent-500); --color-brand: var(--accent-500); --color-brand-hover: var(--accent-400); --color-on-brand: var(--accent-ink); --color-accent: var(--accent-400); --color-selection-bg: var(--accent-800); --color-selection-text: var(--neutral-d-0); --color-brand-mark-bg: var(--violet-500); --color-brand-mark-fg: var(--violet-ink); --status-building-bg: oklch(0.32 0.07 255); --status-building-text: oklch(0.84 0.10 255); --status-building-dot: oklch(0.72 0.13 255); --status-live-bg: oklch(0.30 0.07 150); --status-live-text: oklch(0.86 0.12 150); --status-live-dot: oklch(0.74 0.14 150); --status-checking-bg: oklch(0.34 0.06 80); --status-checking-text: oklch(0.88 0.10 85); --status-checking-dot: oklch(0.80 0.12 80); --status-error-bg: oklch(0.33 0.08 27); --status-error-text: oklch(0.86 0.11 27); --status-error-dot: oklch(0.68 0.16 27); --status-stopped-bg: oklch(0.28 0.012 300); --status-stopped-text: oklch(0.78 0.01 300); --status-stopped-dot: oklch(0.70 0.012 300); --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.40); --shadow-md: 0 6px 22px oklch(0 0 0 / 0.35); --shadow-lg: 0 24px 64px oklch(0 0 0 / 0.60); } @media (prefers-color-scheme: dark) { :root:not([data-theme]), :root[data-theme="auto"] { --accent-50: var(--violet-50); --accent-100: var(--violet-100); --accent-200: var(--violet-200); --accent-300: var(--violet-300); --accent-400: var(--violet-400); --accent-500: var(--violet-500); --accent-600: var(--violet-600); --accent-700: var(--violet-700); --accent-800: var(--violet-800); --accent-900: var(--violet-900); --accent-ink: var(--violet-ink); --color-page-bg: var(--neutral-d-950); --color-surface: var(--neutral-d-900); --color-surface-raised: var(--neutral-d-800); --color-text-primary: var(--neutral-d-50); --color-text-secondary: var(--neutral-d-300); --color-text-faint: var(--neutral-d-400); --color-rule: var(--neutral-d-700); --color-border: var(--neutral-d-600); --color-link: var(--accent-300); --color-link-hover: var(--accent-500); --color-brand: var(--accent-500); --color-brand-hover: var(--accent-400); --color-on-brand: var(--accent-ink); --color-accent: var(--accent-400); --color-selection-bg: var(--accent-800); --color-selection-text: var(--neutral-d-0); --color-brand-mark-bg: var(--violet-500); --color-brand-mark-fg: var(--violet-ink); --status-building-bg: oklch(0.32 0.07 255); --status-building-text: oklch(0.84 0.10 255); --status-building-dot: oklch(0.72 0.13 255); --status-live-bg: oklch(0.30 0.07 150); --status-live-text: oklch(0.86 0.12 150); --status-live-dot: oklch(0.74 0.14 150); --status-checking-bg: oklch(0.34 0.06 80); --status-checking-text: oklch(0.88 0.10 85); --status-checking-dot: oklch(0.80 0.12 80); --status-error-bg: oklch(0.33 0.08 27); --status-error-text: oklch(0.86 0.11 27); --status-error-dot: oklch(0.68 0.16 27); --status-stopped-bg: oklch(0.28 0.012 300); --status-stopped-text: oklch(0.78 0.01 300); --status-stopped-dot: oklch(0.70 0.012 300); --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.40); --shadow-md: 0 6px 22px oklch(0 0 0 / 0.35); --shadow-lg: 0 24px 64px oklch(0 0 0 / 0.60); } } /* ============================================================ * HIGH-CONTRAST OVERLAY — layers over the active theme, keyed by mode. * data-contrast="high" turns it on; prefers-contrast: more auto-detects * unless data-contrast="normal" opts out. Shadows drop (the stronger * borders carry surface separation); the focus ring widens. * ============================================================ */ :root[data-contrast="high"] { --band-text-muted: oklch(0.73 0.018 300); --band-border: oklch(0.52 0.03 300); --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --focus-ring-width: 4px; } :root[data-contrast="high"][data-mode="light"] { --color-text-secondary: oklch(0.43 0.012 70); --color-text-faint: oklch(0.53 0.012 70); --color-rule: oklch(0.63 0.006 90); --color-border: oklch(0.56 0.008 90); --color-link: var(--accent-700); --color-link-hover: var(--accent-800); --color-brand: var(--accent-700); --color-brand-hover: var(--accent-800); --color-accent: var(--accent-700); --color-selection-bg: var(--accent-100); --status-building-text: oklch(0.42 0.13 255); --status-live-text: oklch(0.40 0.11 150); --status-checking-text: oklch(0.42 0.088 75); --status-error-text: oklch(0.43 0.16 27); --status-stopped-text: oklch(0.41 0.01 70); } :root[data-contrast="high"][data-mode="dark"] { --color-page-bg: oklch(0.14 0.014 300); --color-text-secondary: oklch(0.76 0.012 300); --color-text-faint: oklch(0.66 0.012 300); --color-rule: oklch(0.55 0.016 300); --color-border: oklch(0.60 0.016 300); --color-link: var(--accent-200); --color-link-hover: var(--accent-100); --color-brand: var(--accent-400); --color-brand-hover: var(--accent-300); --color-accent: var(--accent-300); --status-building-bg: oklch(0.33 0.07 255); --status-live-bg: oklch(0.36 0.07 150); --status-checking-bg: oklch(0.37 0.06 80); --status-error-bg: oklch(0.34 0.08 27); --status-stopped-bg: oklch(0.28 0.012 300); } @media (prefers-contrast: more) { :root:not([data-contrast="normal"]) { --band-text-muted: oklch(0.73 0.018 300); --band-border: oklch(0.52 0.03 300); --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --focus-ring-width: 4px; } :root:not([data-contrast="normal"])[data-mode="light"] { --color-text-secondary: oklch(0.43 0.012 70); --color-text-faint: oklch(0.53 0.012 70); --color-rule: oklch(0.63 0.006 90); --color-border: oklch(0.56 0.008 90); --color-link: var(--accent-700); --color-link-hover: var(--accent-800); --color-brand: var(--accent-700); --color-brand-hover: var(--accent-800); --color-accent: var(--accent-700); --color-selection-bg: var(--accent-100); --status-building-text: oklch(0.42 0.13 255); --status-live-text: oklch(0.40 0.11 150); --status-checking-text: oklch(0.42 0.088 75); --status-error-text: oklch(0.43 0.16 27); --status-stopped-text: oklch(0.41 0.01 70); } :root:not([data-contrast="normal"])[data-mode="dark"] { --color-page-bg: oklch(0.14 0.014 300); --color-text-secondary: oklch(0.76 0.012 300); --color-text-faint: oklch(0.66 0.012 300); --color-rule: oklch(0.55 0.016 300); --color-border: oklch(0.60 0.016 300); --color-link: var(--accent-200); --color-link-hover: var(--accent-100); --color-brand: var(--accent-400); --color-brand-hover: var(--accent-300); --color-accent: var(--accent-300); --status-building-bg: oklch(0.33 0.07 255); --status-live-bg: oklch(0.36 0.07 150); --status-checking-bg: oklch(0.37 0.06 80); --status-error-bg: oklch(0.34 0.08 27); --status-stopped-bg: oklch(0.28 0.012 300); } } /* Selection uses the palette so it doesn't fall back to the OS blue. */ ::selection { background: var(--color-selection-bg); color: var(--color-selection-text); } /* tokens:generated:end */