/** * ClearPrice canonical design tokens — CSS custom properties. * * Source of truth: ../tokens.json (light) + ../tokens.dark.json (dark color overrides). * * STATUS: hand-maintained. A future PR will auto-generate this file from the * JSON source via a custom Style Dictionary format. Until then, edits to * tokens.json must be mirrored here. The `npm run tokens:check` script (run * via `npm run build`) verifies parity. * * Naming: category-prefixed (--color-primary, --radius-lg, --shadow-elevated). * Matches the Style Dictionary default `name/cti/kebab` transform used to * generate tokens.tailwind.cjs and tokens.ts. Surface code consuming tokens.css * should use these names exclusively — no bare aliases. * * Dark mode: scoped to `.dark` on . See ../../../docs/BRAND.md "Dark Mode". */ :root { /* ── Color · Primary ── */ --color-primary: #024DDF; --color-primary-hover: #0140C0; --color-primary-accent: #60A5FA; /* ── Color · Text & Neutral ── */ --color-text: #0B1220; --color-text-secondary: #475569; --color-muted: #5b6b82; --color-light-muted: #94a3b8; /* ── Color · Background ── */ --color-bg: #ffffff; --color-section-bg: #F5F7FA; --color-card-bg: #ffffff; --color-border: #E5E9F0; --color-hero-bg: #070C18; --color-nav-bg: rgba(255,255,255,0.95); /* ── Color · Semantic ── */ --color-success: #16a34a; --color-warning: #d97706; --color-error: #dc2626; --color-info: #0891b2; /* ── Color · Data Viz (mode-fixed) ── */ --color-dataviz-1star: #EF4444; --color-dataviz-1star-deep: #DC2626; --color-dataviz-2star: #F87171; --color-dataviz-2star-deep: #FB923C; --color-dataviz-3star: #60A5FA; --color-dataviz-3star-deep: #024DDF; --color-dataviz-4star: #024DDF; --color-dataviz-4star-deep: #0140C0; --color-dataviz-5star: #0130A0; --color-dataviz-5star-deep: #012080; --color-dataviz-higher-cost-bg: #FEF2F2; --color-dataviz-higher-cost-border: #FECACA; --color-dataviz-lower-cost-bg: #EFF6FF; --color-dataviz-lower-cost-border: #BFDBFE; /* ── Color · Insight Cards (always on dark hero, mode-fixed) ── */ --color-insight-5star-label: #86EFAC; --color-insight-5star-price: #4ADE80; --color-insight-2star-label: #FCA5A5; --color-insight-2star-price: #F87171; /* ── Color · Badge ── */ --color-badge-amber: hsl(38 92% 45%); --color-badge-green: hsl(142 71% 35%); --color-badge-purple: hsl(263 70% 50%); --color-badge-blue: hsl(220 98% 44%); --color-badge-red: hsl(0 84% 55%); /* ── Color · Tints & Utility ── */ --color-primary-50: #EFF6FF; --color-white: #ffffff; /* ── Font ── */ --font-family-base: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 700; --font-size-h1: 2.75rem; --font-size-h2-section: 2rem; --font-size-h2-proof: 1.75rem; --font-size-h3-card: 1rem; --font-size-body: 1rem; --font-size-hero-subtitle: 1.125rem; --font-size-card-description: 0.875rem; --font-size-small-label: 0.8125rem; --font-size-stat-numbers: 2.25rem; --font-lineheight-tight: 1.2; --font-lineheight-snug: 1.5; --font-lineheight-normal: 1.6; --font-lineheight-relaxed: 1.7; /* ── Radius ── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; /* ── Spacing & Layout ── */ --spacing-max-width: 1080px; --spacing-container-padding: 24px; --spacing-section-padding-desktop: 80px; --spacing-section-padding-tablet: 60px; --spacing-section-padding-mobile: 40px; --spacing-card-padding-desktop: 28px; --spacing-card-padding-tablet: 22px; --spacing-card-padding-mobile: 18px; /* ── Shadow ── */ --shadow-elevated: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); --shadow-interactive: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); --shadow-featured: 0 4px 14px rgba(2,77,223,0.08), 0 1px 3px rgba(0,0,0,0.06); /* ── Motion ── */ --motion-duration-fast: 0.15s; --motion-duration-normal: 0.3s; --motion-duration-slow: 0.6s; --motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --motion-ease-decelerate: cubic-bezier(0, 0, 0.2, 1); --motion-ease-accelerate: cubic-bezier(0.4, 0, 1, 1); /* ── Breakpoints (informational; Tailwind reads these via tokens.tailwind.cjs) ── */ --breakpoint-xs: 340px; --breakpoint-sm: 420px; --breakpoint-md: 600px; --breakpoint-lg: 768px; --breakpoint-xl: 960px; --breakpoint-2xl: 1100px; /* ── Design Language (2026-06-12) ── */ --color-hero-bg2: #0C1830; --color-ambient-accent: #22D3EE; --color-glow-hero-a: rgba(34,211,238,0.34); --color-glow-hero-b: rgba(56,189,248,0.26); --color-glow-card: rgba(2,77,223,0.45); --font-size-display-1: clamp(2.6rem, 5.2vw, 4.25rem); --font-size-display-2: clamp(1.85rem, 3.2vw, 2.6rem); --font-size-eyebrow: 0.75rem; --font-weight-display: 800; --font-tracking-display: -0.032em; --font-lineheight-display: 1.04; --font-tracking-eyebrow: 0.14em; --font-lineheight-display-2: 1.1; --elevation-1: 0 1px 2px rgba(15,23,42,0.04), 0 1px 3px rgba(15,23,42,0.06); --elevation-2: 0 4px 14px rgba(15,23,42,0.08), 0 2px 5px rgba(15,23,42,0.05); --elevation-3: 0 16px 40px rgba(15,23,42,0.13), 0 5px 12px rgba(15,23,42,0.07); } /* ──────────────────────────────────────────────────────────────────────── */ /* Dark mode — overrides only the tokens that change. Everything else */ /* (font, radius, spacing, motion, breakpoint, dataviz, insight) holds. */ /* */ /* Two selectors so the same overrides apply across all surfaces: */ /* .dark — canonical (consumer, admin, landing) */ /* [data-theme='dark'] — Starlight default (advisor, pitch) */ /* See ../../../docs/BRAND.md § Dark Mode Selector for the rationale. */ /* ──────────────────────────────────────────────────────────────────────── */ .dark, [data-theme='dark'] { /* ── Color · Primary ── */ --color-primary: #60A5FA; --color-primary-hover: #024DDF; --color-primary-accent: #93C5FD; /* ── Color · Text & Neutral ── */ --color-text: #f1f5f9; --color-text-secondary: #94a3b8; --color-muted: #64748b; --color-light-muted: #475569; /* ── Color · Background ── */ --color-bg: #030712; --color-section-bg: #0a101c; --color-card-bg: #111827; --color-border: #1e293b; --color-hero-bg: #04070F; --color-nav-bg: rgba(3,7,18,0.92); /* ── Color · Semantic ── */ --color-success: #4ADE80; --color-warning: #fbbf24; --color-error: #F87171; --color-info: #22d3ee; /* ── Color · Badge ── */ --color-badge-amber: hsl(38 92% 50%); --color-badge-green: hsl(142 71% 45%); --color-badge-purple: hsl(263 70% 58%); --color-badge-blue: hsl(220 98% 60%); --color-badge-red: hsl(0 84% 60%); /* ── Shadow (alpha shifted for dark surfaces) ── */ --shadow-elevated: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2); --shadow-interactive: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2); --shadow-featured: 0 4px 14px rgba(96,165,250,0.1), 0 1px 3px rgba(0,0,0,0.3); /* ── Design Language (2026-06-12) ── */ --color-hero-bg2: #081328; --color-ambient-accent: #38BDF8; --color-glow-hero-a: rgba(34,211,238,0.22); --color-glow-hero-b: rgba(56,189,248,0.18); --color-glow-card: rgba(96,165,250,0.18); --elevation-1: 0 1px 2px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.2); --elevation-2: 0 4px 14px rgba(0,0,0,0.35), 0 2px 5px rgba(0,0,0,0.25); --elevation-3: 0 16px 40px rgba(0,0,0,0.5), 0 5px 12px rgba(0,0,0,0.3); }