/* ========================================= VARIABLES — 3-layer design token system. See docs/epics/0004-redesign/colors.html for the canonical color map. Layer 1: Base primitives — raw color values, numbered scales. Layer 2: Semantic tokens — what colors mean. Dark mode swaps these. Layer 3: Component tokens — what specific components use. Rule: component CSS files reference Layer 2 or 3 only, never Layer 1. ========================================= */ :root { /* ── Layer 1: Base Primitives ── Named by color family + shade. These define what colors EXIST. Never referenced directly in component/base CSS files. */ --white: #ffffff; --black: #000000; --gray-50: #f6f9fc; --gray-100: #edf1f7; --gray-200: #e3e8ee; --gray-300: #d1d5db; --gray-400: #a3acb9; --gray-500: #6b7c93; --gray-600: #425466; --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827; --blue-50: #EFF6FF; --blue-100: #DBEAFE; --blue-200: #BFDBFE; --blue-300: #93C5FD; --blue-400: #60A5FA; --blue-500: #2563EB; --blue-600: #1D4ED8; --blue-700: #1E40AF; --cyan-50: #ECFEFF; --cyan-100: #CFFAFE; --cyan-400: #22D3EE; --cyan-500: #06B6D4; --cyan-600: #0891B2; --cyan-700: #0E7490; --red-50: #FEF2F2; --red-500: #EF4444; --red-600: #DC2626; --red-700: #B91C1C; --green-50: #ECFDF5; --green-500: #10B981; --green-600: #059669; --amber-50: #FFFBEB; --amber-500: #F59E0B; --amber-600: #D97706; /* ── Layer 2: Semantic Tokens ── What colors MEAN. Components use these (or Layer 3). Dark mode overrides these mappings — see colors.html for the swap table. */ /* Surfaces */ --bg: var(--gray-50); --bg-2: var(--gray-100); --bg-3: var(--gray-200); --surface: var(--white); --surface-2: #f8fafc; --line: var(--gray-200); --line-2: var(--gray-100); /* Text */ --ink: var(--gray-900); --ink-2: var(--gray-600); --ink-3: var(--gray-500); --ink-4: var(--gray-400); /* Accent */ --accent: var(--blue-500); --accent-light: var(--blue-50); --accent-dark: var(--blue-600); --accent-subtle: rgba(37, 99, 235, 0.06); /* Status */ --success: var(--green-500); --success-soft: rgba(16, 185, 129, 0.10); --success-dark: var(--green-600); --danger: var(--red-500); --danger-soft: rgba(239, 68, 68, 0.10); --danger-dark: var(--red-600); --warning: var(--amber-500); --warning-soft: rgba(245, 158, 11, 0.10); --warning-dark: var(--amber-600); --info: var(--blue-500); --info-soft: rgba(37, 99, 235, 0.10); /* Gradients */ --grad-primary: linear-gradient(135deg, var(--blue-500), var(--cyan-500)); --grad-light: linear-gradient(135deg, var(--blue-400), var(--cyan-400)); /* Shadows (cool-tinted, based on gray-900) */ --shadow-sm: 0 1px 3px rgba(17,24,39,0.04), 0 2px 8px rgba(17,24,39,0.03); --shadow: 0 2px 5px rgba(17,24,39,0.05), 0 8px 22px rgba(17,24,39,0.06); --shadow-lg: 0 4px 8px rgba(17,24,39,0.05), 0 16px 40px rgba(17,24,39,0.08); /* Focus */ --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.18); /* Legacy semantic aliases — kept until Phase 3 migrates consumers */ --green: var(--success); --red: var(--danger); --amber: var(--warning); /* Radii */ --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-xl: 14px; --r-pill: 999px; /* Typography scale (for Phase 3 to apply — not yet used in component files) */ --text-xs: 0.786rem; --text-sm: 0.857rem; --text-base: 1rem; --text-lg: 1.143rem; --text-xl: 1.429rem; --text-2xl: 1.714rem; /* Spacing scale (for Phase 3 to apply) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; /* Layout */ --navbar-height: 56px; /* ── Layer 3: Component Tokens ── What specific components use. May reference Layer 2 (theme-adaptive) or Layer 1 (theme-invariant, e.g. navbar stays dark in all themes). */ /* White-alpha utilities (dark-surface transparency effects) */ --white-a06: rgba(255,255,255,0.06); --white-a12: rgba(255,255,255,0.12); --white-a20: rgba(255,255,255,0.20); --white-a30: rgba(255,255,255,0.30); --white-a40: rgba(255,255,255,0.40); --white-a65: rgba(255,255,255,0.65); --white-a85: rgba(255,255,255,0.85); /* Navbar (dark chrome — Layer 1 refs are intentional, stays dark in all themes) */ --navbar-bg: var(--gray-900); --navbar-border: rgba(255,255,255,0.08); --navbar-tab: rgba(255,255,255,0.75); --navbar-tab-hover: rgba(255,255,255,0.95); --navbar-tab-active: var(--cyan-50); --navbar-chip-text: var(--blue-400); --navbar-chip-bg: rgba(96,165,250,0.18); /* Cards */ --card-bg: var(--surface); --card-border: var(--line); /* Tables */ --table-header-bg: var(--surface-2); --table-header-text: var(--ink-3); --table-row-hover: rgba(37, 99, 235, 0.03); /* Buttons */ --btn-primary-bg: var(--accent); --btn-primary-text: var(--white); /* Forms */ --input-border: var(--line); --input-focus: var(--accent); /* Overlays */ --modal-overlay: rgba(17, 24, 39, 0.5); /* Tier badge palette — blue-to-gray gradient. See colors.html for swatches. Tier 1 = top/elite (darkest blue), fades through lighter blues into grays. 12 tiers before cycling. Backgrounds use Layer 1 refs (theme-invariant). Text uses --white on dark tiers, --gray-900 on light tiers. */ --tier-1-bg: var(--blue-700); --tier-1-text: var(--white); --tier-2-bg: var(--blue-500); --tier-2-text: var(--white); --tier-3-bg: var(--blue-400); --tier-3-text: var(--gray-900); --tier-4-bg: var(--blue-300); --tier-4-text: var(--gray-900); --tier-5-bg: var(--blue-200); --tier-5-text: var(--gray-900); --tier-6-bg: var(--blue-100); --tier-6-text: var(--gray-900); --tier-7-bg: var(--gray-200); --tier-7-text: var(--gray-900); --tier-8-bg: var(--gray-400); --tier-8-text: var(--gray-900); --tier-9-bg: var(--gray-500); --tier-9-text: var(--white); --tier-10-bg: var(--gray-600); --tier-10-text: var(--white); --tier-11-bg: var(--gray-700); --tier-11-text: var(--white); --tier-12-bg: var(--gray-800); --tier-12-text: var(--white); }