/* ========================================================================== tokens.css — Design tokens for the "blue relaunch" Light palette is authoritative; dark palette is derived to keep the existing theme toggle (script.js sets data-theme on ) working. ========================================================================== */ :root { /* Blue scale */ --blue-950: #071A3E; --blue-900: #0A2463; --blue-700: #0B4FA8; --blue-500: #0E7FE0; --cyan-400: #31C6EF; --sky-100: #EAF6FF; /* Neutrals & accent */ --paper: #F7FAFC; --ink: #0B1526; --muted: #5B6B7F; /* Accent + CTA (blue-gradient direction — no lime/neon) */ --accent: var(--cyan-400); --accent-strong: var(--blue-500); --cta-grad: linear-gradient(120deg, var(--blue-700) 0%, var(--blue-500) 55%, var(--cyan-400) 130%); --cta-grad-hover: linear-gradient(120deg, var(--blue-900) 0%, var(--blue-700) 60%, var(--blue-500) 130%); --cta-ink: #FFFFFF; /* Semantic surfaces */ --bg: var(--paper); --surface: #FFFFFF; --surface-2: #F0F5FB; --text: var(--ink); --text-muted: var(--muted); --card-border: #E4ECF5; --hairline: #E8EEF6; /* On the blue hero panel */ --on-dark: #EAF6FF; --on-dark-muted: rgba(234, 246, 255, 0.74); --on-dark-border: rgba(234, 246, 255, 0.20); /* Hero gradient */ --hero-grad: linear-gradient(135deg, var(--blue-900) 0%, var(--blue-700) 48%, var(--cyan-400) 118%); --hero-grad-soft: linear-gradient(135deg, var(--blue-900), var(--blue-700)); /* Glass nav */ --glass-bg: rgba(255, 255, 255, 0.72); --glass-border: rgba(11, 79, 168, 0.12); /* Radii */ --r-sm: 12px; --r-md: 20px; --r-lg: 32px; --r-pill: 999px; /* Shadows (soft, blue-tinted) */ --shadow-sm: 0 8px 22px rgba(10, 36, 99, 0.08); --shadow-md: 0 16px 40px rgba(10, 36, 99, 0.12); --shadow-lg: 0 24px 60px rgba(10, 36, 99, 0.18); --shadow-btn: 0 10px 24px rgba(11, 79, 168, 0.28); /* Typography */ --font-display: "League Spartan", "Arial Narrow", system-ui, sans-serif; --font-body: "Lexend Deca", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --font-label: "Arvo", Georgia, "Times New Roman", serif; /* Type scale */ --fs-hero: clamp(2.75rem, 7.5vw, 6.5rem); --fs-h2: clamp(2rem, 4.5vw, 3.5rem); --fs-h3: clamp(1.25rem, 2.2vw, 1.6rem); --fs-lead: clamp(1.05rem, 1.6vw, 1.25rem); /* Layout */ --maxw: 1200px; --gutter: clamp(16px, 4vw, 24px); --nav-h: 68px; color-scheme: light; } :root[data-theme="dark"] { --bg: #050B1B; --surface: #0C1730; --surface-2: #101E3C; --text: #EAF1FA; --text-muted: #9DB0C7; --card-border: #1E2C49; --hairline: #1A2740; --on-dark: #EAF6FF; --on-dark-muted: rgba(234, 246, 255, 0.74); --on-dark-border: rgba(234, 246, 255, 0.16); --hero-grad: linear-gradient(135deg, #06132E 0%, var(--blue-700) 60%, var(--cyan-400) 128%); --hero-grad-soft: linear-gradient(135deg, #06132E, var(--blue-700)); --glass-bg: rgba(12, 23, 48, 0.62); --glass-border: rgba(234, 246, 255, 0.12); --shadow-sm: 0 8px 22px rgba(0, 0, 0, 0.40); --shadow-md: 0 16px 40px rgba(0, 0, 0, 0.46); --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55); --shadow-btn: 0 10px 24px rgba(0, 0, 0, 0.45); color-scheme: dark; }