/* ─── COREIDON.AI Design Tokens ──────────────────────────────────────────── All colors, spacing, radii, type sizes, motion. Components reference variables here — never hardcoded hex values. Themes flip a single data-theme attribute on . ────────────────────────────────────────────────────────────────────────── */ :root, [data-theme="light"] { /* Backgrounds */ --bg-canvas: #FFFFFF; --bg-surface: #F8F5F0; --bg-elevated: #FFFFFF; /* Text */ --text-primary: #000000; --text-secondary: #2B303B; --text-muted: rgba(43, 48, 59, 0.65); --text-on-accent: #FFFFFF; /* Borders & dividers */ --border-subtle: #E5E7EB; --border-strong: #2B303B; /* Accents */ --accent-primary: #091C3A; /* navy — primary CTAs, logos */ --accent-primary-hover: #0B2447; --accent-expressive: #0284C7; /* cyan — data, focus, links, progress */ --accent-expressive-hover: #0369A1; /* Semantic */ --success: #16A34A; --danger: #DC2626; --warning: #D97706; /* Surfaces specific to data viz */ --chart-grid: #E5E7EB; --chart-track: #F1F5F9; /* Focus ring */ --focus-ring: #0284C7; } [data-theme="dark"] { --bg-canvas: #0A1220; --bg-surface: #121B2A; --bg-elevated: #243447; --text-primary: #FFFFFF; --text-secondary: rgba(248, 245, 240, 0.75); --text-muted: rgba(248, 245, 240, 0.45); --text-on-accent: #FFFFFF; --border-subtle: #1F2A3C; --border-strong: #2D3D52; --accent-primary: #091C3A; --accent-primary-hover: #15294F; --accent-expressive: #38BDF8; --accent-expressive-hover: #7DD3FC; --success: #34D399; --danger: #FB7185; --warning: #FBBF24; --chart-grid: #1F2A3C; --chart-track: #1A2536; --focus-ring: #38BDF8; } :root { /* ─── Typography ─────────────────────────────────────────────────────── */ --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Fluid type — base mobile up, scales to desktop */ --text-xs: clamp(0.6875rem, 0.65rem + 0.2vw, 0.75rem); /* 11→12 */ --text-sm: clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem); /* 13→14 */ --text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem); /* 15→16 */ --text-lg: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); /* 17→20 */ --text-xl: clamp(1.25rem, 1.15rem + 0.6vw, 1.5rem); /* 20→24 */ --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem); /* 24→32 */ --text-3xl: clamp(1.875rem, 1.6rem + 1.4vw, 2.5rem); /* 30→40 */ --text-4xl: clamp(2.25rem, 1.85rem + 2vw, 3rem); /* 36→48 */ /* Line heights */ --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.5; --leading-relaxed: 1.65; /* Letter spacing */ --tracking-tight: -0.02em; --tracking-wide: 0.02em; --tracking-wider: 0.08em; /* Weights */ --weight-regular: 400; --weight-medium: 500; --weight-bold: 700; --weight-black: 900; /* ─── Spacing scale (4px base) ───────────────────────────────────────── */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* ─── Radii ──────────────────────────────────────────────────────────── */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-full: 999px; /* ─── Layout ─────────────────────────────────────────────────────────── */ --max-content-width: 80rem; /* 1280px */ --header-height: 3.5rem; /* 56px — fits 44px tap targets with padding */ /* ─── Motion ─────────────────────────────────────────────────────────── */ --motion-fast: 120ms; --motion-base: 180ms; --motion-slow: 240ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* ─── Z-index scale ──────────────────────────────────────────────────── */ --z-base: 1; --z-sticky: 100; --z-overlay: 200; --z-modal: 300; --z-toast: 400; } /* Respect prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { :root { --motion-fast: 0ms; --motion-base: 0ms; --motion-slow: 0ms; } }