/* ============================================================
MASTER UI — TOKENS
------------------------------------------------------------
Drop-in CSS variables. Import before components.css.
Theme switch: or "light"
============================================================ */
/* Fonts (Atkinson Hyperlegible Next + Mono) load via in
each page's , not @import here. An @import is render-blocking AND only
discovered after this stylesheet downloads, delaying first paint; a in
the document head fetches in parallel. Keep the in sync if axes change. */
/* ---------- BASE (light) ---------- */
:root,
[data-theme="light"] {
/* ---------- COLOR: SURFACES ---------- */
--bg: #f6f4f0; /* page background */
--bg-subtle: #faf9f6; /* alt sections, sidebars */
--bg-muted: #f4f4f5; /* hover wells, code bg */
--surface: #ffffff; /* cards, modals */
--surface-hover: #fafafa;
--surface-active: #f4f4f5;
--overlay: rgba(10, 10, 10, 0.8); /* modal backdrop */
--glass: rgba(255, 255, 255, 0.7); /* glass panels */
--glass-border: rgba(10, 10, 10, 0.08);
/* ---------- COLOR: BORDERS ---------- */
--border: #e4e4e7;
--border-strong: #d4d4d8;
--border-focus: var(--primary);
--ring: rgba(145, 108, 204, 0.40); /* focus ring */
--ring-danger: color-mix(in srgb, var(--danger) 32%, transparent); /* invalid focus ring */
/* ---------- COLOR: FOREGROUND ---------- */
--fg: #0a0a0a; /* primary text */
--fg-muted: #52525b; /* secondary text */
--fg-subtle: #a1a1aa; /* tertiary / placeholder */
--fg-on-accent: #ffffff; /* text on accent bg */
/* ---------- COLOR: BRAND ---------- */
--primary: #916ccc;
--primary-hover: #aa8ed7;
--primary-active: #7c54bd;
--primary-subtle: rgba(145, 108, 204, 0.16);
--primary-fg: #5e3a9e;
--fg-on-primary: #ffffff;
--secondary: #2dd4bf;
--secondary-hover: rgba(45, 212, 191, 0.64);
--secondary-active: #22b8a4;
--secondary-subtle: rgba(45, 212, 191, 0.16);
--secondary-fg: #0f6b61;
--fg-on-secondary: #ffffff;
/* Legacy aliases — --accent-* resolves to --primary-*. Prefer --primary in new code. */
--accent: var(--primary);
--accent-hover: var(--primary-hover);
--accent-active: var(--primary-active);
--accent-subtle: var(--primary-subtle);
--accent-fg: var(--primary-fg);
--fg-on-accent: var(--fg-on-primary);
/* ---------- COLOR: SEMANTIC ----------
-subtle and -fg are derived from each base hue so badges/alerts
read as the actual palette color (a tint bg + a deepened same-hue
text), not off-palette darks. Mirrors the dark-theme approach. */
--success: #4cd98a;
--success-subtle: color-mix(in srgb, var(--success) 15%, var(--surface));
--success-fg: color-mix(in srgb, var(--success) 50%, var(--fg));
--warning: #fbb948;
--warning-subtle: color-mix(in srgb, var(--warning) 15%, var(--surface));
--warning-fg: color-mix(in srgb, var(--warning) 50%, var(--fg));
--danger: #fd4242;
--danger-hover: #e62e2e;
--danger-subtle: color-mix(in srgb, var(--danger) 15%, var(--surface));
--danger-fg: color-mix(in srgb, var(--danger) 50%, var(--fg));
--info: #65e0da;
--info-subtle: color-mix(in srgb, var(--info) 15%, var(--surface));
--info-fg: color-mix(in srgb, var(--info) 50%, var(--fg));
/* ---------- COLOR: CHARTS (categorical, 8) ---------- */
--chart-1: var(--primary);
--chart-2: #10b981;
--chart-3: #f59e0b;
--chart-4: #ef4444;
--chart-5: #a855f7;
--chart-6: #06b6d4;
--chart-7: #ec4899;
--chart-8: #84cc16;
/* ---------- TYPOGRAPHY ---------- */
--font-sans: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: "Atkinson Hyperlegible Mono", ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;
--font-display: var(--font-sans);
/* size scale (rem-based, dense) */
--text-2xs: 0.6875rem; /* 11px */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.8125rem; /* 13px — dashboard default */
--text-base: 0.875rem; /* 14px — body */
--text-md: 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 */
--text-6xl: 3.75rem; /* 60px */
/* weight */
--weight-light: 300;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
/* line height */
--leading-tight: 1.15;
--leading-snug: 1.35;
--leading-normal: 1.5;
--leading-relaxed: 1.7;
/* letter spacing */
--tracking-tight: -0.02em;
--tracking-normal: 0;
--tracking-wide: 0.02em;
--tracking-caps: 0.06em;
/* ---------- SPACING (4px base, dense) ---------- */
--space-0: 0;
--space-1: 0.25rem; /* 4 */
--space-2: 0.5rem; /* 8 */
--space-3: 0.75rem; /* 12 */
--space-4: 1rem; /* 16 */
--space-5: 1.25rem; /* 20 */
--space-6: 1.5rem; /* 24 */
--space-8: 2rem; /* 32 */
--space-10: 2.5rem; /* 40 */
--space-12: 3rem; /* 48 */
--space-16: 4rem; /* 64 */
--space-20: 5rem; /* 80 */
--space-24: 6rem; /* 96 */
/* ---------- RADIUS (one scale, one decision) ---------- */
--radius: 12px; /* the only rectangular radius */
--radius-full: 9999px; /* circles, pills, avatars, switches, dots */
/* Legacy aliases — all resolve to --radius. Kept for backward compat;
prefer var(--radius) directly in new code. */
--radius-xs: var(--radius);
--radius-sm: var(--radius);
--radius-md: var(--radius);
--radius-lg: var(--radius);
--radius-xl: var(--radius);
--radius-2xl: var(--radius);
/* ---------- SHADOW (one decision) ---------- */
--shadow: 0 4px 8px -2px rgba(10, 10, 10, 0.08), 0 2px 4px -2px rgba(10, 10, 10, 0.04);
/* Legacy aliases — all resolve to --shadow. Inputs and grounded elements
should carry no shadow at all. Prefer var(--shadow) in new code. */
--shadow-xs: var(--shadow);
--shadow-sm: var(--shadow);
--shadow-md: var(--shadow);
--shadow-lg: var(--shadow);
--shadow-xl: var(--shadow);
--shadow-2xl: var(--shadow);
--shadow-inner: inset 0 1px 2px rgba(10, 10, 10, 0.06);
/* ---------- MOTION ---------- */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in: cubic-bezier(0.7, 0, 0.84, 0);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--duration-fast: 120ms;
--duration-base: 180ms;
--duration-slow: 280ms;
--duration-slower: 450ms;
/* ---------- MOTION: SLIDING HOVER ----------
Single source of truth for the sliding highlight that travels
between sibling items (sidenav, popovers, table rows, any
[data-hover-group]). Tune these two values to shift the whole
system between "smooth" and "snappy".
Presets (drop in to override):
Snappy — duration 140ms, ease cubic-bezier(0.2, 0, 0, 1)
Default — duration 280ms, ease cubic-bezier(0.16, 1, 0.3, 1)
Smooth — duration 420ms, ease cubic-bezier(0.22, 1, 0.36, 1)
*/
--hover-slide-duration: var(--duration-slow);
--hover-slide-ease: var(--ease-out);
/* ---------- MOTION: IN-PAGE SCROLL ----------
When a link target is on the same page (e.g. ``),
the page glides to it instead of snapping. Tune these to taste —
"swift" by default. Set to 0ms to disable. motion.js reads them
at click time, so changes take effect immediately.
*/
--scroll-duration: 480ms;
--scroll-ease: var(--ease-out);
/* ---------- LAYOUT ---------- */
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1280px;
--container-2xl: 1536px;
--sidebar-w: 240px;
--topbar-h: 52px;
/* ---------- ICON ----------
Phosphor icons. 20px is the default rule; 16 for dense
inline contexts, 24 for feature/empty states. Phosphor draws
on a 256-grid and paints with fill — recolored via currentColor. */
--icon-sm: 20px;
--icon-size: 20px; /* default */
--icon-lg: 20px;
/* ---------- Z-INDEX ---------- */
--z-base: 0;
--z-raised: 10;
--z-dropdown: 100;
--z-sticky: 200;
--z-modal: 300;
--z-toast: 400;
--z-tooltip: 500;
/* ---------- GRADIENTS (subtle, modern-tech) ---------- */
--gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--fg) 100%);
--gradient-accent: var(--gradient-primary); /* alias */
--gradient-surface: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
--gradient-glow: radial-gradient(circle at 50% 0%, rgba(139, 107, 177, 0.14), transparent 60%);
}
/* ---------- DARK ---------- */
[data-theme="dark"] {
--bg: #0a0a0a;
--bg-subtle: #111111;
--bg-muted: #18181b;
--surface: #131313;
--surface-hover: #18181b;
--surface-active: #1f1f23;
--overlay: rgba(0, 0, 0, 0.8);
--glass: rgba(20, 20, 20, 0.6);
--glass-border: rgba(255, 255, 255, 0.08);
--border: #27272a;
--border-strong: #3f3f46;
--border-focus: var(--primary);
--ring: rgba(167, 139, 250, 0.40);
--fg: #fafafa;
--fg-muted: #a1a1aa;
--fg-subtle: #52525b;
--fg-on-accent: #ffffff;
--primary: #a78bfa;
--primary-hover: #bda8fb;
--primary-active: #8b6bb1;
--primary-subtle: rgba(167, 139, 250, 0.16);
--primary-fg: #d4c4fd;
--fg-on-primary: #1e0a4a;
--secondary: #2dd4bf;
--secondary-hover: rgba(45, 212, 191, 0.64);
--secondary-active: #5ee2d0;
--secondary-subtle: rgba(45, 212, 191, 0.16);
--secondary-fg: #99f6ec;
--fg-on-secondary: #042f2e;
--accent: var(--primary);
--accent-hover: var(--primary-hover);
--accent-active: var(--primary-active);
--accent-subtle: var(--primary-subtle);
--accent-fg: var(--primary-fg);
--fg-on-accent: var(--fg-on-primary);
--success: #4cd98a;
--success-subtle: rgba(76, 217, 138, 0.14);
--success-fg: #86efac;
--warning: #fbb948;
--warning-subtle: rgba(251, 185, 72, 0.14);
--warning-fg: #fcd34d;
--danger: #fd4242;
--danger-hover: #ff6b6b;
--danger-subtle: rgba(253, 66, 66, 0.14);
--danger-fg: #fca5a5;
--info: #65e0da;
--info-subtle: rgba(101, 224, 218, 0.14);
--info-fg: #a5f3fc;
--shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
--shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.4);
--gradient-surface: linear-gradient(180deg, #131313 0%, #0a0a0a 100%);
--gradient-glow: radial-gradient(circle at 50% 0%, rgba(167, 139, 250, 0.18), transparent 60%);
}
/* ---------- ELEMENT DEFAULTS ---------- */
*,
*::before,
*::after { box-sizing: border-box; }
html {
font-family: var(--font-sans);
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
color-scheme: light dark;
}
body {
margin: 0;
background: var(--bg);
color: var(--fg);
font-size: var(--text-base);
line-height: var(--leading-normal);
font-weight: var(--weight-regular);
transition: background var(--duration-base) var(--ease-out),
color var(--duration-base) var(--ease-out);
}
::selection { background: var(--accent); color: #fff; }
:focus-visible {
outline: 2px solid var(--border-focus);
outline-offset: 2px;
border-radius: var(--radius);
}
/* Honor system preference if no data-theme set */
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
--bg: #0a0a0a;
--bg-subtle: #111111;
--bg-muted: #18181b;
--surface: #131313;
--surface-hover: #18181b;
--surface-active: #1f1f23;
--overlay: rgba(0, 0, 0, 0.8);
--glass: rgba(20, 20, 20, 0.6);
--glass-border: rgba(255, 255, 255, 0.08);
--border: #27272a;
--border-strong: #3f3f46;
--border-focus: var(--primary);
--ring: rgba(167, 139, 250, 0.40);
--fg: #fafafa;
--fg-muted: #a1a1aa;
--fg-subtle: #52525b;
--primary-subtle: rgba(167, 139, 250, 0.16);
--primary-fg: #d4c4fd;
--secondary-subtle: rgba(45, 212, 191, 0.16);
--secondary-fg: #99f6ec;
--accent-subtle: var(--primary-subtle);
--accent-fg: var(--primary-fg);
color-scheme: dark;
}
}