/* ============================================================ SLAY — DESIGN TOKENS Light/Dark theme via [data-theme] attribute on ============================================================ */ :root { /* ---- Brand core (theme-independent) ---- */ --brand-h: 252; /* violet-indigo hue */ --brand: hsl(var(--brand-h) 90% 60%); --brand-strong: hsl(var(--brand-h) 85% 52%); --brand-soft: hsl(var(--brand-h) 90% 60% / 0.14); --accent-2: hsl(162 75% 45%); /* signal green, used sparingly */ /* ---- Type families ---- */ --font-display: 'Manrope', 'Inter', system-ui, -apple-system, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace; /* ---- Type scale (major-third-ish, tuned by hand) ---- */ --fs-000: 0.75rem; /* 12px — micro labels, eyebrows */ --fs-00: 0.8125rem; /* 13px — small/meta text */ --fs-0: 0.9375rem; /* 15px — body */ --fs-1: 1.0625rem; /* 17px — lead body / large label */ --fs-2: clamp(1.15rem, 1.05rem + 0.4vw, 1.3125rem); /* h3 — fluid */ --fs-3: clamp(1.4rem, 1.2rem + 0.85vw, 1.75rem); /* h2 — fluid */ --fs-4: clamp(1.75rem, 1.35rem + 1.7vw, 2.375rem); /* h1 — fluid */ --fs-5: clamp(2.1rem, 1.15rem + 4vw, 3.25rem); /* hero display — fluid */ /* ---- Weights ---- */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* ---- Line heights ---- */ --lh-tight: 1.15; /* headings */ --lh-snug: 1.35; /* labels, UI text */ --lh-body: 1.6; /* paragraphs */ /* ---- Letter spacing ---- */ --ls-tight: -0.03em; /* large headings */ --ls-snug: -0.01em; /* small headings */ --ls-normal: 0; --ls-wide: 0.02em; /* medium-weight UI labels */ --ls-wider: 0.1em; /* uppercase micro labels */ /* ---- Spacing scale (4px base) ---- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; /* ---- Radius ---- */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-full: 999px; /* ---- Motion ---- */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 120ms; --dur-med: 220ms; /* ---- Layout ---- */ --navbar-h: 64px; --sidebar-w: 248px; --sidebar-w-collapsed: 76px; /* ---- Fixed "on dark surface" text tokens ---- Used ONLY on surfaces that are intentionally dark in BOTH themes (e.g. the auth brand panel). These must NOT flip with --bg/--text-primary, or text goes invisible on dark theme (that was the Phase 2.1 root-cause bug). Theme-independent by design — do not move into the light/dark blocks below. */ --on-dark-surface: #F5F5F3; --on-dark-surface-muted: hsl(0 0% 100% / 0.64); /* ---- Universal scrim (drawer/modal backdrops) ---- Same in both themes on purpose — it dims whatever is behind it, not the surface color itself. */ --scrim: hsl(240 10% 4% / 0.5); } /* ============================================================ LIGHT THEME (default) ============================================================ */ :root, [data-theme='light'] { --bg: #FAFAF9; --bg-raised: #FFFFFF; --bg-sunken: #F0F0EE; --bg-overlay: #FFFFFF; --border: #DCDCD6; --border-strong: #C6C6BF; --text-primary: #16161A; --text-secondary: #55555A; --text-tertiary: #75757B; --text-on-brand: #FFFFFF; /* Layered elevation — soft ambient + tighter contact shadow, not a single flat blur. Each level is additive on the last. */ --shadow-sm: 0 1px 2px rgba(20, 20, 15, 0.05), 0 1px 1px rgba(20, 20, 15, 0.04); --shadow-md: 0 6px 16px rgba(20, 20, 15, 0.07), 0 2px 6px rgba(20, 20, 15, 0.05); --shadow-lg: 0 16px 36px rgba(20, 20, 15, 0.11), 0 4px 12px rgba(20, 20, 15, 0.06); --shadow-xl: 0 24px 56px rgba(20, 20, 15, 0.16), 0 8px 20px rgba(20, 20, 15, 0.08); /* ---- Status colors (theme-aware) ---- */ --success-strong: hsl(152 65% 32%); --success-soft: hsl(152 70% 45% / 0.14); --danger-strong: hsl(358 72% 46%); --danger-soft: hsl(358 75% 55% / 0.14); --warning-strong: hsl(38 88% 36%); --warning-soft: hsl(38 90% 55% / 0.17); --focus-ring: 0 0 0 3px hsl(var(--brand-h) 90% 60% / 0.35); } /* ============================================================ DARK THEME ============================================================ */ [data-theme='dark'] { --bg: #0E0E10; --bg-raised: #17171A; --bg-sunken: #0A0A0B; --bg-overlay: #1E1E22; --border: #303035; --border-strong: #40404A; --text-primary: #F2F2F0; --text-secondary: #ACACB2; --text-tertiary: #86868D; --text-on-brand: #0E0E10; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.2); --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.5), 0 6px 16px rgba(0, 0, 0, 0.35); --shadow-xl: 0 28px 64px rgba(0, 0, 0, 0.6), 0 10px 24px rgba(0, 0, 0, 0.4); --success-strong: hsl(152 60% 56%); --success-soft: hsl(152 60% 56% / 0.16); --danger-strong: hsl(358 78% 66%); --danger-soft: hsl(358 78% 66% / 0.16); --warning-strong: hsl(38 90% 62%); --warning-soft: hsl(38 90% 62% / 0.18); --focus-ring: 0 0 0 3px hsl(var(--brand-h) 90% 65% / 0.4); }