:root{
/* base palette */
--navy-0:#060B14; /* canvas / video backdrop stand-in */
--navy-1:#0A1220;
--navy-2:#0E1A2C;
--cyan-500:#00C2FF;
--cyan-300:#6FDBFF;
--cyan-900:#003A52;
--amber-500:#FF8A3D; /* rare accent only */
--ice-100:#E8F4FF; /* primary text */
--slate-300:#9FB3C8; /* secondary text */
--slate-500:#5E7288;
/* semantic */
--bg-canvas:var(--navy-0);
--text-primary:var(--ice-100);
--text-secondary:var(--slate-300);
--text-muted:var(--slate-500);
--accent:var(--cyan-500);
--accent-soft:var(--cyan-300);
--accent-rare:var(--amber-500);
/* glass system */
--glass-fill:rgba(10,18,32,0.55);
--glass-fill-strong:rgba(10,18,32,0.75);
--glass-stroke:rgba(0,194,255,0.35);
--glass-stroke-strong:rgba(0,194,255,0.65);
--glass-blur:14px;
--glow-cyan:0 0 24px rgba(0,194,255,0.18), inset 0 0 12px rgba(0,194,255,0.06);
--glow-cyan-hover:0 0 32px rgba(0,194,255,0.32), inset 0 0 16px rgba(0,194,255,0.10);
/* protection: keeps text legible over moving video */
--scrim-hero:linear-gradient(180deg, rgba(6,11,20,0.20) 0%, rgba(6,11,20,0.55) 60%, rgba(6,11,20,0.80) 100%); /* @kind color */
--scrim-edge:linear-gradient(90deg, rgba(6,11,20,0.75) 0%, rgba(6,11,20,0.00) 70%); /* @kind color */
}
:root{
--font-display:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
--font-body:'Inter',ui-sans-serif,system-ui,sans-serif;
/* scale */
--text-display:clamp(44px,6vw,88px);
--text-h1:56px;
--text-h2:36px;
--text-h3:24px;
--text-body-lg:18px;
--text-body:16px;
--text-small:14px;
--text-micro:12px;
/* weights */
--weight-display:500;
--weight-heading:500;
--weight-body:400;
--weight-medium:500;
--weight-semibold:600;
/* micro-label: wide-tracked all-caps */
--tracking-micro:0.22em;
--tracking-display:-0.02em;
--leading-display:1.04;
--leading-heading:1.15;
--leading-body:1.6;
/* text over video always carries a shadow */
--text-shadow-video:0 1px 8px rgba(6,11,20,0.8);
}
:root{
/* spacing scale (px) */
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;
/* radii — sharp, technical */
--radius-sm:4px;
--radius-md:8px;
--radius-lg:12px;
--radius-pill:999px;
/* borders */
--border-hairline:1px solid var(--glass-stroke);
--border-hairline-strong:1px solid var(--glass-stroke-strong);
/* layout */
--container-max:1200px;
--nav-height:64px;
--z-nav:100; /* @kind other */
--z-overlay:10; /* @kind other */
/* motion */
--ease-out:cubic-bezier(0.16,1,0.3,1); /* @kind other */
--dur-fast:150ms; /* @kind other */
--dur-med:300ms; /* @kind other */
--dur-slow:600ms; /* @kind other */
}