/* house-ui tokens — Material 3 (Expressive) roles on one knob. * * --hue is the whole palette: every role is oklch() math on it, so a new app * changes one number, not forty. Themes ride light-dark(): each token is * written once, and [data-theme] on overrides the OS setting. * Tones follow M3's scheme (primary = tone 40 light / 80 dark, containers * 90 / 30, surfaces as tonal containers instead of shadows). */ :root { --hue: 230; /* ice blue. The one knob. */ --hue-tertiary: calc(var(--hue) + 60); --hue-error: 27; color-scheme: light dark; } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } :root { /* ── Color roles ─────────────────────────────────────────────────── */ --primary: light-dark(oklch(0.47 0.13 var(--hue)), oklch(0.82 0.09 var(--hue))); --on-primary: light-dark(oklch(1 0 0), oklch(0.30 0.08 var(--hue))); --primary-container: light-dark(oklch(0.92 0.045 var(--hue)), oklch(0.37 0.10 var(--hue))); --on-primary-container: light-dark(oklch(0.33 0.09 var(--hue)), oklch(0.92 0.045 var(--hue))); --secondary: light-dark(oklch(0.47 0.035 var(--hue)), oklch(0.82 0.03 var(--hue))); --on-secondary: light-dark(oklch(1 0 0), oklch(0.30 0.03 var(--hue))); --secondary-container: light-dark(oklch(0.92 0.02 var(--hue)), oklch(0.37 0.035 var(--hue))); --on-secondary-container: light-dark(oklch(0.33 0.03 var(--hue)), oklch(0.92 0.02 var(--hue))); --tertiary: light-dark(oklch(0.47 0.09 var(--hue-tertiary)), oklch(0.82 0.07 var(--hue-tertiary))); --on-tertiary: light-dark(oklch(1 0 0), oklch(0.30 0.06 var(--hue-tertiary))); --tertiary-container: light-dark(oklch(0.92 0.04 var(--hue-tertiary)), oklch(0.37 0.08 var(--hue-tertiary))); --on-tertiary-container: light-dark(oklch(0.33 0.07 var(--hue-tertiary)), oklch(0.92 0.04 var(--hue-tertiary))); --error: light-dark(oklch(0.52 0.19 var(--hue-error)), oklch(0.80 0.10 var(--hue-error))); --on-error: light-dark(oklch(1 0 0), oklch(0.32 0.12 var(--hue-error))); --error-container: light-dark(oklch(0.92 0.05 var(--hue-error)), oklch(0.40 0.15 var(--hue-error))); --on-error-container: light-dark(oklch(0.35 0.12 var(--hue-error)), oklch(0.92 0.05 var(--hue-error))); /* Surfaces are tonal steps, not shadows: a raised thing is a higher container. */ --surface: light-dark(oklch(0.985 0.004 var(--hue)), oklch(0.16 0.006 var(--hue))); --surface-dim: light-dark(oklch(0.89 0.006 var(--hue)), oklch(0.16 0.006 var(--hue))); --surface-bright: light-dark(oklch(0.985 0.004 var(--hue)), oklch(0.33 0.008 var(--hue))); --surface-container-lowest: light-dark(oklch(1 0 0), oklch(0.13 0.006 var(--hue))); --surface-container-low: light-dark(oklch(0.965 0.006 var(--hue)), oklch(0.20 0.008 var(--hue))); --surface-container: light-dark(oklch(0.95 0.007 var(--hue)), oklch(0.22 0.008 var(--hue))); --surface-container-high: light-dark(oklch(0.935 0.008 var(--hue)), oklch(0.26 0.008 var(--hue))); --surface-container-highest: light-dark(oklch(0.92 0.009 var(--hue)), oklch(0.30 0.008 var(--hue))); --on-surface: light-dark(oklch(0.20 0.01 var(--hue)), oklch(0.92 0.008 var(--hue))); --on-surface-variant: light-dark(oklch(0.40 0.02 var(--hue)), oklch(0.83 0.018 var(--hue))); --outline: light-dark(oklch(0.58 0.02 var(--hue)), oklch(0.66 0.018 var(--hue))); --outline-variant: light-dark(oklch(0.84 0.015 var(--hue)), oklch(0.40 0.018 var(--hue))); --inverse-surface: light-dark(oklch(0.30 0.01 var(--hue)), oklch(0.92 0.008 var(--hue))); --inverse-on-surface: light-dark(oklch(0.96 0.006 var(--hue)), oklch(0.30 0.01 var(--hue))); --inverse-primary: light-dark(oklch(0.82 0.09 var(--hue)), oklch(0.47 0.13 var(--hue))); --scrim: oklch(0 0 0 / 0.32); /* ── Type (M3 scale; roles, not raw sizes) ───────────────────────── */ --font: "Roboto Flex", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "Roboto Mono", ui-monospace, monospace; --display-l: 400 57px/64px var(--font); --display-m: 400 45px/52px var(--font); --display-s: 400 36px/44px var(--font); --headline-l: 400 32px/40px var(--font); --headline-m: 400 28px/36px var(--font); --headline-s: 400 24px/32px var(--font); --title-l: 400 22px/28px var(--font); --title-m: 500 16px/24px var(--font); --title-s: 500 14px/20px var(--font); --body-l: 400 16px/24px var(--font); --body-m: 400 14px/20px var(--font); --body-s: 400 12px/16px var(--font); --label-l: 500 14px/20px var(--font); --label-m: 500 12px/16px var(--font); --label-s: 500 11px/16px var(--font); /* ── Shape (Expressive scale) ────────────────────────────────────── */ --shape-xs: 4px; --shape-sm: 8px; --shape-md: 12px; --shape-lg: 16px; --shape-lg-plus: 20px; --shape-xl: 28px; --shape-xl-plus: 32px; --shape-2xl: 48px; --shape-full: 9999px; /* ── Space (4px grid) ────────────────────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; /* ── Motion ──────────────────────────────────────────────────────── */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-decel: cubic-bezier(0.05, 0.7, 0.1, 1); --ease-accel: cubic-bezier(0.3, 0, 0.8, 0.15); /* A gentle spring (small overshoot) for shape and position changes. */ --ease-spring: linear(0, 0.013 0.6%, 0.05 1.2%, 0.2 2.5%, 0.494 4.2%, 0.785 6.2%, 0.97 8.1%, 1.07 10%, 1.11 11.9%, 1.114 13.3%, 1.1 14.9%, 1.03 19.3%, 1.004 22.5%, 0.99 26.3%, 0.993 34.1%, 1.001 45.3%, 1); --dur-short: 150ms; --dur-medium: 250ms; --dur-long: 400ms; /* ── State layers (opacity of the content colour over the container) ── */ --state-hover: 0.08; --state-focus: 0.10; --state-press: 0.10; --state-drag: 0.16; /* ── Elevation: only for things that float (menus, FAB, dialogs) ──── */ --elev-1: 0 1px 2px oklch(0 0 0 / 0.3), 0 1px 3px 1px oklch(0 0 0 / 0.15); --elev-2: 0 1px 2px oklch(0 0 0 / 0.3), 0 2px 6px 2px oklch(0 0 0 / 0.15); --elev-3: 0 4px 8px 3px oklch(0 0 0 / 0.15), 0 1px 3px oklch(0 0 0 / 0.3); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }