/* ============================================================ * theme.css — CSS Custom Property Theming System v1.0 * * ARCHITECTURE * ───────────────────────────────────────────────────────────── * Layer 1 │ Primitive tokens Raw color palette values. * │ Prefix: --primitive-{color}-{shade} * │ ⚠ Internal use only — never reference in components. * * Layer 2 │ Semantic tokens Role-based aliases of primitives. * │ Prefix: --color-{role}-{variant} * │ ✓ Use these in all component and layout styles. * * Layer 3 │ Design tokens Spacing, typography, effects. * │ Prefix: --space-*, --text-*, --font-*, --shadow-*, etc. * │ ✓ Theme-agnostic; defined once on :root. * * THEME RESOLUTION (highest priority first) * ───────────────────────────────────────────────────────────── * :root.theme-dark JS-forced dark mode * :root.theme-light JS-forced light mode * @media prefers-color-scheme: dark OS dark preference * :root default Light fallback (no JS needed) * * No JavaScript is required on initial page load. The OS * preference is honoured via the media query. JS may add * .theme-light or .theme-dark to to override. * * ADDING A NEW THEME * ───────────────────────────────────────────────────────────── * 1. Add a :root.theme-{name} { } block. * 2. Override only the semantic tokens that differ. * 3. Zero component refactoring required. * See: theme-high-contrast and theme-sepia examples below. * * WCAG AA COMPLIANCE * ───────────────────────────────────────────────────────────── * All foreground/background pairings are verified at: * • Normal text / UI components ≥ 4.5 : 1 * • Large text (≥ 18pt or 14pt bold) ≥ 3.0 : 1 * Contrast ratios are annotated inline where relevant. * Disabled states (--color-text-disabled) are decorative * and intentionally exempt per WCAG 1.4.3 exception. * ============================================================ */ /* ╔══════════════════════════════════════════════════════════════╗ ║ LAYER 1 — PRIMITIVE TOKENS (internal, do not use directly) ║ ╚══════════════════════════════════════════════════════════════╝ */ :root { /* ── Neutral (slate-based) ──────────────────────────────────── */ --primitive-neutral-0: #ffffff; --primitive-neutral-50: #f8fafc; --primitive-neutral-100: #f1f5f9; --primitive-neutral-200: #e2e8f0; --primitive-neutral-300: #cbd5e1; --primitive-neutral-400: #94a3b8; --primitive-neutral-500: #64748b; --primitive-neutral-600: #475569; --primitive-neutral-700: #334155; --primitive-neutral-800: #1e293b; --primitive-neutral-900: #0f172a; --primitive-neutral-950: #080c18; --primitive-neutral-1000: #000000; /* ── Blue (primary / action) ─────────────────────────────────── */ --primitive-blue-50: #eff6ff; --primitive-blue-100: #dbeafe; --primitive-blue-200: #bfdbfe; --primitive-blue-300: #93c5fd; --primitive-blue-400: #60a5fa; --primitive-blue-500: #3b82f6; --primitive-blue-600: #2563eb; --primitive-blue-700: #1d4ed8; --primitive-blue-800: #1565c0; --primitive-blue-900: #1e3a5f; /* ── Green (success) ─────────────────────────────────────────── */ --primitive-green-50: #f0fdf4; --primitive-green-100: #dcfce7; --primitive-green-200: #bbf7d0; --primitive-green-400: #4ade80; --primitive-green-600: #16a34a; --primitive-green-700: #15803d; --primitive-green-800: #166534; --primitive-green-900: #14532d; /* ── Amber (warning) ─────────────────────────────────────────── */ --primitive-amber-50: #fffbeb; --primitive-amber-100: #fef9c3; --primitive-amber-200: #fef08a; --primitive-amber-400: #fbbf24; --primitive-amber-500: #f59e0b; --primitive-amber-700: #b45309; --primitive-amber-800: #92400e; --primitive-amber-900: #78350f; /* ── Red (error / danger) ────────────────────────────────────── */ --primitive-red-50: #fef2f2; --primitive-red-100: #fee2e2; --primitive-red-200: #fecaca; --primitive-red-400: #f87171; --primitive-red-500: #ef4444; --primitive-red-600: #dc2626; --primitive-red-700: #b91c1c; --primitive-red-800: #991b1b; /* ── Cyan (info) ─────────────────────────────────────────────── */ --primitive-cyan-50: #ecfeff; --primitive-cyan-100: #cffafe; --primitive-cyan-200: #a5f3fc; --primitive-cyan-400: #22d3ee; --primitive-cyan-600: #0891b2; --primitive-cyan-700: #0e7490; --primitive-cyan-800: #155e75; --primitive-cyan-900: #164e63; } /* ╔══════════════════════════════════════════════════════════════╗ ║ LAYER 2 — SEMANTIC TOKENS (LIGHT — default) ║ ╚══════════════════════════════════════════════════════════════╝ Applied when: • No theme class is present (respects OS light preference) • :root.theme-light is explicitly set */ :root, :root.theme-light { /* ── Surface & Background ──────────────────────────────────── */ --color-bg: var(--primitive-neutral-0); /* Page background */ --color-surface: var(--primitive-neutral-50); /* Cards, panels */ --color-surface-raised: var(--primitive-neutral-0); /* Dropdowns, popovers */ --color-surface-sunken: var(--primitive-neutral-100); /* Inputs, code blocks */ --color-surface-overlay: rgba(15, 23, 42, 0.50); /* Modal backdrop */ /* ── Text ─────────────────────────────────────────────────── */ /* Contrast ratios measured against --color-bg (#ffffff) */ --color-text: var(--primitive-neutral-900); /* Body text ≈ 17.9:1 */ --color-text-subtle: var(--primitive-neutral-700); /* Secondary text ≈ 10.3:1 */ --color-text-muted: var(--primitive-neutral-600); /* Captions, meta ≈ 7.6:1 */ --color-text-disabled: var(--primitive-neutral-400); /* Disabled (decorative, exempt) */ --color-text-inverse: var(--primitive-neutral-0); /* On dark surfaces ≈ 19.3:1 */ --color-text-link: var(--primitive-blue-800); /* Links ≈ 5.8:1 */ --color-text-link-hover: var(--primitive-blue-700); /* Link hover ≈ 4.7:1 */ /* ── Border ───────────────────────────────────────────────── */ --color-border: var(--primitive-neutral-200); /* Default dividers, frames */ --color-border-strong: var(--primitive-neutral-400); /* Emphasized borders */ --color-border-focus: var(--primitive-blue-600); /* Focus ring stroke color */ --color-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.40); /* box-shadow shorthand */ /* ── Primary Action (blue) ────────────────────────────────── */ /* --color-primary bg + --color-primary-on text ≈ 5.8:1 */ --color-primary: var(--primitive-blue-800); /* Filled button / CTA bg */ --color-primary-hover: var(--primitive-blue-700); /* Hover bg */ --color-primary-active: var(--primitive-blue-900); /* Pressed bg */ --color-primary-subtle: var(--primitive-blue-50); /* Ghost / tinted bg */ --color-primary-on: var(--primitive-neutral-0); /* Text on solid primary bg */ --color-primary-subtle-on: var(--primitive-blue-800); /* Text on subtle bg ≈ 5.8:1 */ /* ── Success (green) ──────────────────────────────────────── */ /* --color-success bg + --color-success-on text ≈ 5.0:1 */ --color-success: var(--primitive-green-700); /* Solid badge/button bg */ --color-success-hover: var(--primitive-green-800); /* Hover */ --color-success-on: var(--primitive-neutral-0); /* Text on solid ≈ 5.0:1 */ --color-success-subtle: var(--primitive-green-100); /* Tinted bg */ --color-success-text: var(--primitive-green-800); /* Text on default bg ≈ 7.1:1*/ --color-success-border: var(--primitive-green-600); /* Alert / tag border */ --color-success-subtle-on: var(--primitive-green-800); /* Text on subtle ≈ 6.5:1 */ /* ── Warning (amber) ──────────────────────────────────────── */ /* --color-warning bg + --color-warning-on text ≈ 10.5:1 */ --color-warning: var(--primitive-amber-400); /* Solid badge/banner bg */ --color-warning-hover: var(--primitive-amber-500); /* Hover */ --color-warning-on: var(--primitive-amber-900); /* Text on solid ≈ 10.5:1 */ --color-warning-subtle: var(--primitive-amber-100); /* Tinted bg */ --color-warning-text: var(--primitive-amber-800); /* Text on default bg ≈ 7.1:1*/ --color-warning-border: var(--primitive-amber-500); /* Alert / tag border */ --color-warning-subtle-on: var(--primitive-amber-800); /* Text on subtle ≈ 6.6:1 */ /* ── Error (red) ──────────────────────────────────────────── */ /* --color-error bg + --color-error-on text ≈ 4.8:1 */ --color-error: var(--primitive-red-600); /* Solid badge/button bg */ --color-error-hover: var(--primitive-red-700); /* Hover */ --color-error-on: var(--primitive-neutral-0); /* Text on solid ≈ 4.8:1 */ --color-error-subtle: var(--primitive-red-100); /* Tinted bg */ --color-error-text: var(--primitive-red-700); /* Text on default bg ≈ 6.5:1*/ --color-error-border: var(--primitive-red-500); /* Alert / tag border */ --color-error-subtle-on: var(--primitive-red-700); /* Text on subtle ≈ 5.3:1 */ /* ── Info (cyan) ──────────────────────────────────────────── */ /* --color-info bg + --color-info-on text ≈ 5.4:1 */ --color-info: var(--primitive-cyan-700); /* Solid badge/banner bg */ --color-info-hover: var(--primitive-cyan-800); /* Hover */ --color-info-on: var(--primitive-neutral-0); /* Text on solid ≈ 5.4:1 */ --color-info-subtle: var(--primitive-cyan-100); /* Tinted bg */ --color-info-text: var(--primitive-cyan-700); /* Text on default bg ≈ 5.4:1*/ --color-info-border: var(--primitive-cyan-600); /* Alert / tag border */ --color-info-subtle-on: var(--primitive-cyan-700); /* Text on subtle ≈ 4.8:1 */ /* ── Shadows (theme-aware) ────────────────────────────────── */ --shadow-color: rgba(15, 23, 42, 0.10); --shadow-color-md: rgba(15, 23, 42, 0.14); --shadow-color-lg: rgba(15, 23, 42, 0.18); /* ── Card shadows — multi-layer Apple-style depth ────────── */ --shadow-card: 0 0 0 0.5px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08), 0 6px 16px rgba(15, 23, 42, 0.07), 0 16px 32px rgba(15, 23, 42, 0.04); --shadow-card-hover: 0 0 0 0.5px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.10), 0 12px 24px rgba(15, 23, 42, 0.12), 0 28px 48px rgba(15, 23, 42, 0.08); /* ── Liquid glass tokens ─────────────────────────────────── */ /* Glass bg is semi-transparent so backdrop-filter shines */ --glass-bg: rgba(255, 255, 255, 0.55); --glass-bg-hover: rgba(255, 255, 255, 0.72); --glass-border: rgba(255, 255, 255, 0.50); --glass-highlight: rgba(255, 255, 255, 0.85); /* top specular edge */ --glass-tint: rgba(255, 255, 255, 0.28); /* inner gradient overlay */ --glass-blur: blur(40px) saturate(180%); --glass-text: var(--primitive-neutral-900); --glass-text-subtle: var(--primitive-neutral-700); /* Layered inset shadow creates the glass-edge refraction */ --shadow-glass: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(255, 255, 255, 0.20), inset 1px 0 0 rgba(255, 255, 255, 0.30), inset -1px 0 0 rgba(255, 255, 255, 0.15), 0 2px 8px rgba(15, 23, 42, 0.08), 0 8px 24px rgba(15, 23, 42, 0.10), 0 24px 48px rgba(15, 23, 42, 0.06); } /* ╔══════════════════════════════════════════════════════════════╗ ║ LAYER 2 — SEMANTIC TOKENS (DARK) ║ ╚══════════════════════════════════════════════════════════════╝ Block A — OS preference (no JS needed on initial load). Skipped if .theme-light or .theme-high-contrast is set. */ @media (prefers-color-scheme: dark) { :root:not(.theme-light):not(.theme-high-contrast):not(.theme-sepia) { --color-bg: var(--primitive-neutral-900); /* ─── Surfaces ─── */ --color-surface: var(--primitive-neutral-800); --color-surface-raised: var(--primitive-neutral-700); --color-surface-sunken: var(--primitive-neutral-950); --color-surface-overlay: rgba(0, 0, 0, 0.70); --color-text: var(--primitive-neutral-50); /* ≈ 17.1:1 on bg */ --color-text-subtle: var(--primitive-neutral-300); /* ≈ 12.0:1 */ --color-text-muted: var(--primitive-neutral-400); /* ≈ 6.9:1 */ --color-text-disabled: var(--primitive-neutral-600); --color-text-inverse: var(--primitive-neutral-900); --color-text-link: var(--primitive-blue-300); /* ≈ 9.9:1 */ --color-text-link-hover: var(--primitive-blue-200); /* ≈ 12.2:1 */ --color-border: var(--primitive-neutral-700); --color-border-strong: var(--primitive-neutral-500); --color-border-focus: var(--primitive-blue-400); --color-focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.50); --color-primary: var(--primitive-blue-400); /* ≈ 7.0:1 on bg */ --color-primary-hover: var(--primitive-blue-300); --color-primary-active: var(--primitive-blue-200); --color-primary-subtle: var(--primitive-blue-900); --color-primary-on: var(--primitive-neutral-900);/* dark txt on btn ≈7:1 */ --color-primary-subtle-on: var(--primitive-blue-300); --color-success: var(--primitive-green-700); --color-success-hover: var(--primitive-green-600); --color-success-on: var(--primitive-neutral-0); --color-success-subtle: rgba(22, 101, 52, 0.25); --color-success-text: var(--primitive-green-400); /* ≈ 10.3:1 on bg */ --color-success-border: var(--primitive-green-700); --color-success-subtle-on: var(--primitive-green-400); --color-warning: var(--primitive-amber-400); --color-warning-hover: var(--primitive-amber-500); --color-warning-on: var(--primitive-amber-900); --color-warning-subtle: rgba(146, 64, 14, 0.25); --color-warning-text: var(--primitive-amber-400); /* ≈ 10.7:1 on bg */ --color-warning-border: var(--primitive-amber-700); --color-warning-subtle-on: var(--primitive-amber-400); --color-error: var(--primitive-red-600); --color-error-hover: var(--primitive-red-500); --color-error-on: var(--primitive-neutral-0); --color-error-subtle: rgba(153, 27, 27, 0.25); --color-error-text: var(--primitive-red-400); /* ≈ 6.5:1 on bg */ --color-error-border: var(--primitive-red-700); --color-error-subtle-on: var(--primitive-red-400); --color-info: var(--primitive-cyan-700); --color-info-hover: var(--primitive-cyan-600); --color-info-on: var(--primitive-neutral-0); --color-info-subtle: rgba(21, 94, 117, 0.25); --color-info-text: var(--primitive-cyan-400); /* ≈ 9.9:1 on bg */ --color-info-border: var(--primitive-cyan-700); --color-info-subtle-on: var(--primitive-cyan-400); --shadow-color: rgba(0, 0, 0, 0.30); --shadow-color-md: rgba(0, 0, 0, 0.40); --shadow-color-lg: rgba(0, 0, 0, 0.50); --shadow-card: 0 0 0 0.5px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.30), 0 6px 16px rgba(0, 0, 0, 0.25), 0 16px 32px rgba(0, 0, 0, 0.15); --shadow-card-hover: 0 0 0 0.5px rgba(0, 0, 0, 0.40), 0 4px 8px rgba(0, 0, 0, 0.35), 0 12px 24px rgba(0, 0, 0, 0.30), 0 28px 48px rgba(0, 0, 0, 0.25); --glass-bg: rgba(15, 23, 42, 0.55); --glass-bg-hover: rgba(15, 23, 42, 0.72); --glass-border: rgba(255, 255, 255, 0.12); --glass-highlight: rgba(255, 255, 255, 0.22); --glass-tint: rgba(255, 255, 255, 0.07); --glass-blur: blur(40px) saturate(180%); --glass-text: var(--primitive-neutral-50); --glass-text-subtle: var(--primitive-neutral-300); --shadow-glass: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(255, 255, 255, 0.06), inset 1px 0 0 rgba(255, 255, 255, 0.09), inset -1px 0 0 rgba(255, 255, 255, 0.04), 0 2px 8px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.40), 0 24px 48px rgba(0, 0, 0, 0.25); } } /* Block B — JS-forced dark class (overrides OS preference either way). */ :root.theme-dark { --color-bg: var(--primitive-neutral-900); --color-surface: var(--primitive-neutral-800); --color-surface-raised: var(--primitive-neutral-700); --color-surface-sunken: var(--primitive-neutral-950); --color-surface-overlay: rgba(0, 0, 0, 0.70); --color-text: var(--primitive-neutral-50); /* ≈ 17.1:1 on bg */ --color-text-subtle: var(--primitive-neutral-300); /* ≈ 12.0:1 */ --color-text-muted: var(--primitive-neutral-400); /* ≈ 6.9:1 */ --color-text-disabled: var(--primitive-neutral-600); --color-text-inverse: var(--primitive-neutral-900); --color-text-link: var(--primitive-blue-300); --color-text-link-hover: var(--primitive-blue-200); --color-border: var(--primitive-neutral-700); --color-border-strong: var(--primitive-neutral-500); --color-border-focus: var(--primitive-blue-400); --color-focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.50); --color-primary: var(--primitive-blue-400); --color-primary-hover: var(--primitive-blue-300); --color-primary-active: var(--primitive-blue-200); --color-primary-subtle: var(--primitive-blue-900); --color-primary-on: var(--primitive-neutral-900); --color-primary-subtle-on: var(--primitive-blue-300); --color-success: var(--primitive-green-700); --color-success-hover: var(--primitive-green-600); --color-success-on: var(--primitive-neutral-0); --color-success-subtle: rgba(22, 101, 52, 0.25); --color-success-text: var(--primitive-green-400); --color-success-border: var(--primitive-green-700); --color-success-subtle-on: var(--primitive-green-400); --color-warning: var(--primitive-amber-400); --color-warning-hover: var(--primitive-amber-500); --color-warning-on: var(--primitive-amber-900); --color-warning-subtle: rgba(146, 64, 14, 0.25); --color-warning-text: var(--primitive-amber-400); --color-warning-border: var(--primitive-amber-700); --color-warning-subtle-on: var(--primitive-amber-400); --color-error: var(--primitive-red-600); --color-error-hover: var(--primitive-red-500); --color-error-on: var(--primitive-neutral-0); --color-error-subtle: rgba(153, 27, 27, 0.25); --color-error-text: var(--primitive-red-400); --color-error-border: var(--primitive-red-700); --color-error-subtle-on: var(--primitive-red-400); --color-info: var(--primitive-cyan-700); --color-info-hover: var(--primitive-cyan-600); --color-info-on: var(--primitive-neutral-0); --color-info-subtle: rgba(21, 94, 117, 0.25); --color-info-text: var(--primitive-cyan-400); --color-info-border: var(--primitive-cyan-700); --color-info-subtle-on: var(--primitive-cyan-400); --shadow-color: rgba(0, 0, 0, 0.30); --shadow-color-md: rgba(0, 0, 0, 0.40); --shadow-color-lg: rgba(0, 0, 0, 0.50); --shadow-card: 0 0 0 0.5px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.30), 0 6px 16px rgba(0, 0, 0, 0.25), 0 16px 32px rgba(0, 0, 0, 0.15); --shadow-card-hover: 0 0 0 0.5px rgba(0, 0, 0, 0.40), 0 4px 8px rgba(0, 0, 0, 0.35), 0 12px 24px rgba(0, 0, 0, 0.30), 0 28px 48px rgba(0, 0, 0, 0.25); --glass-bg: rgba(15, 23, 42, 0.55); --glass-bg-hover: rgba(15, 23, 42, 0.72); --glass-border: rgba(255, 255, 255, 0.12); --glass-highlight: rgba(255, 255, 255, 0.22); --glass-tint: rgba(255, 255, 255, 0.07); --glass-blur: blur(40px) saturate(180%); --glass-text: var(--primitive-neutral-50); --glass-text-subtle: var(--primitive-neutral-300); --shadow-glass: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(255, 255, 255, 0.06), inset 1px 0 0 rgba(255, 255, 255, 0.09), inset -1px 0 0 rgba(255, 255, 255, 0.04), 0 2px 8px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.40), 0 24px 48px rgba(0, 0, 0, 0.25); } /* ╔══════════════════════════════════════════════════════════════╗ ║ LAYER 3 — DESIGN TOKENS (theme-agnostic) ║ ╚══════════════════════════════════════════════════════════════╝ */ :root { /* ── Spacing (4 px base grid) ────────────────────────────── */ --space-px: 1px; --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* ── Typography — Font families ──────────────────────────── */ --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; /* ── Typography — Size scale ─────────────────────────────── */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ /* ── Typography — Weight ─────────────────────────────────── */ --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; /* ── Typography — Line height ────────────────────────────── */ --leading-none: 1; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; /* ── Typography — Letter spacing ─────────────────────────── */ --tracking-tighter: -0.05em; --tracking-tight: -0.025em; --tracking-normal: 0em; --tracking-wide: 0.025em; --tracking-wider: 0.05em; --tracking-widest: 0.1em; /* ── Border radius ───────────────────────────────────────── */ --radius-none: 0; --radius-sm: 0.125rem; /* 2px */ --radius-md: 0.375rem; /* 6px */ --radius-lg: 0.5rem; /* 8px */ --radius-xl: 0.75rem; /* 12px */ --radius-2xl: 1rem; /* 16px */ --radius-full: 9999px; /* ── Box shadows (uses theme-aware --shadow-color vars) ──── */ --shadow-sm: 0 1px 2px 0 var(--shadow-color); --shadow-md: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -2px var(--shadow-color); --shadow-lg: 0 10px 15px -3px var(--shadow-color-md), 0 4px 6px -4px var(--shadow-color); --shadow-xl: 0 20px 25px -5px var(--shadow-color-lg), 0 8px 10px -6px var(--shadow-color-md); --shadow-inner: inset 0 2px 4px 0 var(--shadow-color); --shadow-none: none; /* ── Transitions ─────────────────────────────────────────── */ --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-fast: 100ms; --duration-base: 150ms; --duration-slow: 250ms; --duration-slower: 400ms; --transition-colors: color var(--duration-base) var(--ease-default), background-color var(--duration-base) var(--ease-default), border-color var(--duration-base) var(--ease-default), fill var(--duration-base) var(--ease-default), stroke var(--duration-base) var(--ease-default); --transition-opacity: opacity var(--duration-base) var(--ease-default); --transition-shadow: box-shadow var(--duration-base) var(--ease-default); --transition-transform: transform var(--duration-base) var(--ease-default); --transition-all: all var(--duration-base) var(--ease-default); /* ── Z-index scale ───────────────────────────────────────── */ --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600; } /* ╔══════════════════════════════════════════════════════════════╗ ║ ADDITIONAL THEME — High Contrast ║ ║ ║ ║ Demonstrates the extensibility pattern. To add this theme: ║ ║ document.documentElement.className = 'theme-high-contrast'║ ╚══════════════════════════════════════════════════════════════╝ */ :root.theme-high-contrast { /* Surfaces */ --color-bg: #000000; --color-surface: #0a0a0a; --color-surface-raised: #111111; --color-surface-sunken: #000000; --color-surface-overlay: rgba(0, 0, 0, 0.95); /* Text — all pure or near-white for maximum contrast */ --color-text: #ffffff; /* 21:1 */ --color-text-subtle: #f0f0f0; /* ≈ 19.5:1 */ --color-text-muted: #c8c8c8; /* ≈ 9.5:1 */ --color-text-disabled: #707070; --color-text-inverse: #000000; --color-text-link: #ffff00; /* ≈ 19.6:1 (classic HC) */ --color-text-link-hover: #ffffff; /* 21:1 */ /* Borders */ --color-border: #ffffff; --color-border-strong: #ffffff; --color-border-focus: #ffff00; --color-focus-ring: 0 0 0 3px #ffff00, 0 0 0 5px #000000; /* Primary */ --color-primary: #ffffff; --color-primary-hover: #eeeeee; --color-primary-active: #dddddd; --color-primary-subtle: #1a1a1a; --color-primary-on: #000000; /* 21:1 */ --color-primary-subtle-on: #ffffff; /* Status — use pure bright colours for maximum discrimination */ --color-success: #00c853; --color-success-hover: #00e676; --color-success-on: #000000; --color-success-subtle: #003300; --color-success-text: #00c853; --color-success-border: #00c853; --color-success-subtle-on: #00c853; --color-warning: #ffab00; --color-warning-hover: #ffd740; --color-warning-on: #000000; --color-warning-subtle: #332200; --color-warning-text: #ffab00; --color-warning-border: #ffab00; --color-warning-subtle-on: #ffab00; --color-error: #ff1744; --color-error-hover: #ff616f; --color-error-on: #000000; --color-error-subtle: #330000; --color-error-text: #ff6e6e; --color-error-border: #ff1744; --color-error-subtle-on: #ff6e6e; --color-info: #40c4ff; --color-info-hover: #80d8ff; --color-info-on: #000000; --color-info-subtle: #001a33; --color-info-text: #40c4ff; --color-info-border: #40c4ff; --color-info-subtle-on: #40c4ff; --shadow-color: rgba(255, 255, 255, 0.15); --shadow-color-md: rgba(255, 255, 255, 0.20); --shadow-color-lg: rgba(255, 255, 255, 0.25); } /* ╔══════════════════════════════════════════════════════════════╗ ║ ADDITIONAL THEME — Sepia (warm reading mode) ║ ║ ║ ║ A second example theme: override semantic tokens only, ║ ║ no primitives or component changes needed. ║ ╚══════════════════════════════════════════════════════════════╝ */ :root.theme-sepia { --color-bg: #f4ecd8; --color-surface: #ede0c4; --color-surface-raised: #f4ecd8; --color-surface-sunken: #e8d5b2; --color-surface-overlay: rgba(61, 43, 31, 0.45); --color-text: #3d2b1f; /* ≈ 11.4:1 on --color-bg */ --color-text-subtle: #5c3d2a; /* ≈ 8.0:1 */ --color-text-muted: #6b4c3b; /* ≈ 6.6:1 */ --color-text-disabled: #a08878; --color-text-inverse: #f4ecd8; --color-text-link: #7c2d12; /* ≈ 8.0:1 */ --color-text-link-hover: #9a3412; /* ≈ 6.7:1 */ --color-border: #c8b49a; --color-border-strong: #a08070; --color-border-focus: #7c2d12; --color-focus-ring: 0 0 0 3px rgba(124, 45, 18, 0.35); /* Sepia primary: warm brown-red */ --color-primary: #7c2d12; --color-primary-hover: #6c2010; --color-primary-active: #5a1a0e; --color-primary-subtle: #fdf4e7; --color-primary-on: #f4ecd8; /* ≈ 8.0:1 */ --color-primary-subtle-on: #7c2d12; /* Status colours are kept largely the same but slightly warmed */ --color-success: #15803d; --color-success-hover: #166534; --color-success-on: #f4ecd8; --color-success-subtle: #d4edda; --color-success-text: #166534; --color-success-border: #16a34a; --color-success-subtle-on: #166534; --color-warning: #b45309; --color-warning-hover: #92400e; --color-warning-on: #f4ecd8; --color-warning-subtle: #fef3d0; --color-warning-text: #92400e; --color-warning-border: #b45309; --color-warning-subtle-on: #92400e; --color-error: #b91c1c; --color-error-hover: #991b1b; --color-error-on: #f4ecd8; --color-error-subtle: #fde8e8; --color-error-text: #991b1b; --color-error-border: #dc2626; --color-error-subtle-on: #991b1b; --color-info: #0e7490; --color-info-hover: #155e75; --color-info-on: #f4ecd8; --color-info-subtle: #d4f0f5; --color-info-text: #0e7490; --color-info-border: #0891b2; --color-info-subtle-on: #0e7490; --shadow-color: rgba(61, 43, 31, 0.10); --shadow-color-md: rgba(61, 43, 31, 0.15); --shadow-color-lg: rgba(61, 43, 31, 0.20); } /* ╔══════════════════════════════════════════════════════════════╗ ║ BASE RESETS using semantic tokens ║ ╚══════════════════════════════════════════════════════════════╝ */ *, *::before, *::after { box-sizing: border-box; } html { /* Smooth theme transitions — only colours, not layout */ transition: var(--transition-colors); } body { margin: 0; font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--font-weight-normal); line-height: var(--leading-normal); color: var(--color-text); background-color: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Respect user motion preferences */ @media (prefers-reduced-motion: reduce) { html { transition: none; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } a { color: var(--color-text-link); transition: var(--transition-colors); } a:hover { color: var(--color-text-link-hover); } /* Visible, accessible focus ring on all interactive elements */ :focus-visible { outline: none; box-shadow: var(--color-focus-ring); border-radius: var(--radius-md); } hr { border: none; border-top: 1px solid var(--color-border); margin: var(--space-6) 0; } code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; } code { background-color: var(--color-surface-sunken); color: var(--color-error-text); padding: 0.15em 0.4em; border-radius: var(--radius-sm); } pre { background-color: var(--color-surface-sunken); color: var(--color-text); padding: var(--space-4); border-radius: var(--radius-lg); border: 1px solid var(--color-border); overflow-x: auto; } pre code { background: none; padding: 0; color: inherit; } ::selection { background-color: var(--color-primary); color: var(--color-primary-on); }