/* ═══════════════════════════════════════════════════════════════════════ SEMANTIC.CSS — TIER 2: SEMANTIC TOKENS (purpose-driven) ─────────────────────────────────────────────────────────────────────── The ONLY layer that light / dark / brand themes override. Every token here references a TIER-1 primitive (tokens.css) and is consumed by component tokens + component CSS. Component/app CSS must never reach past this layer to a raw color. Themes toggle via the `data-theme` attribute on : :root, [data-theme="light"] → light (default) [data-theme="dark"] → dark [data-theme="brand"] → immersive brand (violet/magenta) Derived variants use color-mix() (broad support) with a relative-color `oklch(from …)` progressive-enhancement override on the next line — if the browser lacks relative-color syntax, the invalid declaration is dropped and the color-mix fallback stands. Both yield a usable hover/active tint with matching lightness; chroma differs slightly (oklab white/black mixing desaturates, while the relative-color form preserves the source chroma). Values are exact OKLCH equivalents of the previous hex/rgba palette, so adopting this layer is visually lossless. ═══════════════════════════════════════════════════════════════════════ */ /* ───────────────────────────── LIGHT ───────────────────────────────── */ :root, [data-theme="light"] { /* Surfaces */ --color-bg: var(--ds-gray-0); /* page background (#fff) */ --color-bg-subtle: var(--ds-gray-50); --color-surface: var(--ds-gray-100); /* cards/panels (#f5f5f5) */ --color-surface-raised: var(--ds-gray-0); /* elevated card (#fff) */ --color-surface-overlay: var(--ds-gray-0); /* menus/popovers */ --color-surface-alt: var(--ds-gray-0); /* legacy --white (#fff) */ --color-surface-sunken: var(--ds-gray-100); /* Text */ --color-text: var(--ds-gray-1000); /* primary text (#000) */ --color-text-strong: oklch(0% 0 0 / 0.85); --color-text-muted: oklch(0% 0 0 / 0.62); --color-text-subtle: oklch(0% 0 0 / 0.45); --color-text-on-accent: var(--ds-gray-0); /* Borders */ --color-border: oklch(0% 0 0 / 0.18); --color-border-soft: oklch(0% 0 0 / 0.12); --color-border-strong: oklch(0% 0 0 / 0.35); /* Accent (interactive brand color — violet in light) */ --color-accent: var(--ds-violet-550); /* = #681EEB */ --color-accent-hover: color-mix(in oklab, var(--color-accent), white 12%); --color-accent-hover: oklch(from var(--color-accent) calc(l + 0.06) c h); --color-accent-active: color-mix(in oklab, var(--color-accent), black 10%); --color-accent-active: oklch(from var(--color-accent) calc(l - 0.06) c h); --color-accent-soft: color-mix(in oklab, var(--color-accent) 12%, transparent); --color-accent-contrast: var(--ds-gray-0); /* Brand constant (stays violet across themes — legacy --primary) */ --color-brand: var(--ds-violet-500); /* = #7300e7 */ --color-brand-2: var(--ds-pink-500); /* = #FF00CC */ /* Status */ --color-danger: var(--ds-red-500); --color-danger-soft: color-mix(in oklab, var(--ds-red-500) 14%, transparent); --color-success: var(--ds-green-500); --color-success-soft: color-mix(in oklab, var(--ds-green-500) 14%, transparent); --color-warning: var(--ds-amber-500); --color-info: var(--ds-blue-500); /* Inputs */ --color-input-bg: oklch(0% 0 0 / 0.04); --color-input-bg-focus: oklch(0% 0 0 / 0.07); /* Focus ring + scrim */ --color-ring: var(--color-accent); --color-scrim: oklch(0% 0 0 / 0.5); /* Brand gradient (used for headings / CTA fills) */ --gradient-brand: linear-gradient(135deg, var(--color-brand), var(--color-brand-2)); /* ── Component tokens · Glass (resolve from semantics) ────────────── */ --glass-tint: oklch(100% 0 0 / 0.62); --glass-blur: 18px; --glass-refraction: 0.55; /* 0–1 displacement scale */ --glass-radius: var(--ds-radius-xl); --glass-border: oklch(100% 0 0 / 0.55); --glass-highlight: inset 0 1px 0 oklch(100% 0 0 / 0.9), inset 0 0 0 1px oklch(100% 0 0 / 0.22); --glass-shadow: 0 14px 44px -16px oklch(45% 0.18 293 / 0.22), 0 4px 14px -6px oklch(25% 0.03 283 / 0.12); --glass-saturate: 1.5; } /* ───────────────────────────── DARK ────────────────────────────────── */ [data-theme="dark"] { --color-bg: var(--ds-gray-1000); /* #000 */ --color-bg-subtle: var(--ds-slate-900); --color-surface: oklch(0% 0 0 / 0.25); /* legacy --widget-bg dark */ --color-surface-raised: oklch(100% 0 0 / 0.10); /* legacy --card-bg dark */ --color-surface-overlay: var(--ds-slate-800); --color-surface-alt: var(--ds-slate-700); /* legacy --white (#323D4E) */ --color-surface-sunken: oklch(100% 0 0 / 0.06); --color-text: var(--ds-gray-0); /* #fff */ --color-text-strong: oklch(100% 0 0 / 0.92); --color-text-muted: oklch(100% 0 0 / 0.60); --color-text-subtle: oklch(100% 0 0 / 0.45); --color-text-on-accent: oklch(18% 0 0); --color-border: oklch(100% 0 0 / 0.20); --color-border-soft: oklch(100% 0 0 / 0.14); --color-border-strong: oklch(100% 0 0 / 0.30); --color-accent: var(--ds-sky-400); /* = #57B9FF */ --color-accent-hover: color-mix(in oklab, var(--color-accent), white 10%); --color-accent-hover: oklch(from var(--color-accent) calc(l + 0.05) c h); --color-accent-active: color-mix(in oklab, var(--color-accent), black 12%); --color-accent-active: oklch(from var(--color-accent) calc(l - 0.06) c h); --color-accent-soft: color-mix(in oklab, var(--color-accent) 18%, transparent); --color-accent-contrast: oklch(18% 0 0); /* dark text on sky accent */ --color-brand: var(--ds-violet-500); /* #7300e7 stays violet */ --color-brand-2: var(--ds-pink-500); --color-danger: var(--ds-red-400); --color-danger-soft: color-mix(in oklab, var(--ds-red-400) 22%, transparent); --color-success: var(--ds-green-400); --color-success-soft: color-mix(in oklab, var(--ds-green-400) 22%, transparent); --color-warning: var(--ds-amber-400); --color-info: var(--ds-blue-400); --color-input-bg: oklch(100% 0 0 / 0.10); --color-input-bg-focus: oklch(100% 0 0 / 0.15); --color-ring: var(--color-accent); --color-scrim: oklch(0% 0 0 / 0.65); --gradient-brand: linear-gradient(135deg, var(--color-brand), var(--color-brand-2)); --glass-tint: oklch(20% 0.02 283 / 0.50); --glass-blur: 20px; --glass-refraction: 0.5; --glass-radius: var(--ds-radius-xl); --glass-border: oklch(100% 0 0 / 0.14); --glass-highlight: inset 0 1px 0 oklch(100% 0 0 / 0.18), inset 0 0 0 1px oklch(100% 0 0 / 0.06); --glass-shadow: 0 18px 50px -18px oklch(0% 0 0 / 0.6), 0 6px 18px -8px oklch(0% 0 0 / 0.4); --glass-saturate: 1.4; } /* ──────────────────────────── BRAND ────────────────────────────────── */ /* An immersive violet/magenta theme — overrides ONLY semantic tokens. */ [data-theme="brand"] { --color-bg: var(--ds-slate-900); --color-bg-subtle: oklch(20% 0.045 293); --color-surface: oklch(24% 0.05 293 / 0.55); --color-surface-raised: oklch(30% 0.06 296 / 0.70); --color-surface-overlay: oklch(26% 0.055 296); --color-surface-alt: oklch(28% 0.05 300); --color-surface-sunken: oklch(18% 0.04 293 / 0.6); --color-text: oklch(97% 0.012 320); --color-text-strong: oklch(99% 0.01 320); --color-text-muted: oklch(97% 0.012 320 / 0.66); --color-text-subtle: oklch(97% 0.012 320 / 0.45); --color-text-on-accent: var(--ds-gray-0); --color-border: oklch(80% 0.08 320 / 0.22); --color-border-soft: oklch(80% 0.08 320 / 0.14); --color-border-strong: oklch(85% 0.10 320 / 0.40); --color-accent: var(--ds-pink-500); /* magenta accent */ --color-accent-hover: color-mix(in oklab, var(--color-accent), white 10%); --color-accent-hover: oklch(from var(--color-accent) calc(l + 0.05) c h); --color-accent-active: color-mix(in oklab, var(--color-accent), black 10%); --color-accent-active: oklch(from var(--color-accent) calc(l - 0.05) c h); --color-accent-soft: color-mix(in oklab, var(--color-accent) 18%, transparent); /* Dark text on the magenta brand accent: white fails WCAG AA (3.4:1) on #FF00CC; near-black clears it (~5.5:1). */ --color-accent-contrast: oklch(18% 0 0); --color-brand: var(--ds-violet-400); --color-brand-2: var(--ds-pink-500); --color-danger: var(--ds-red-400); --color-danger-soft: color-mix(in oklab, var(--ds-red-400) 22%, transparent); --color-success: var(--ds-green-400); --color-success-soft: color-mix(in oklab, var(--ds-green-400) 22%, transparent); --color-warning: var(--ds-amber-400); --color-info: var(--ds-blue-400); --color-input-bg: oklch(100% 0 0 / 0.08); --color-input-bg-focus: oklch(100% 0 0 / 0.14); --color-ring: var(--color-accent); --color-scrim: oklch(12% 0.04 293 / 0.7); --gradient-brand: linear-gradient(135deg, var(--color-brand), var(--color-brand-2)); --glass-tint: oklch(28% 0.06 300 / 0.45); --glass-blur: 22px; --glass-refraction: 0.62; --glass-radius: var(--ds-radius-xl); --glass-border: oklch(85% 0.10 320 / 0.22); --glass-highlight: inset 0 1px 0 oklch(100% 0 0 / 0.22), inset 0 0 0 1px oklch(90% 0.08 320 / 0.08); --glass-shadow: 0 20px 56px -18px oklch(40% 0.20 320 / 0.5), 0 6px 20px -8px oklch(10% 0.04 293 / 0.5); --glass-saturate: 1.5; } /* ─── Accessibility: prefers-reduced-transparency ───────────────────────── Make glass + translucent surfaces near-opaque so text stays legible for users who request reduced transparency. Applies across all themes. */ @media (prefers-reduced-transparency: reduce) { :root, [data-theme="light"] { --glass-tint: oklch(100% 0 0 / 0.96); --glass-blur: 0px; --color-surface: var(--ds-gray-100); --color-surface-raised: var(--ds-gray-0); } [data-theme="dark"] { --glass-tint: oklch(14% 0.02 283 / 0.97); --glass-blur: 0px; --color-surface: oklch(14% 0.02 283); --color-surface-raised: oklch(20% 0.02 283); } [data-theme="brand"] { --glass-tint: oklch(22% 0.05 296 / 0.97); --glass-blur: 0px; } } /* ─── Robustness: no backdrop-filter support → opaque glass tint ───────── */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root, [data-theme="light"] { --glass-tint: oklch(100% 0 0 / 0.95); } [data-theme="dark"] { --glass-tint: oklch(16% 0.02 283 / 0.96); } [data-theme="brand"] { --glass-tint: oklch(22% 0.05 296 / 0.96); } }