/* ============================================================================ * KQAS ADAPTIVE DESIGN TOKEN SYSTEM — V3.0 DEFINITIVE * Five complete brand worlds. State class on . Tokens flow everywhere. * φ = 1.618033988749894 * ============================================================================ */ /* --- BASE TOKENS (shared primitives) --- */ :root { --phi: 1.618033988749894; --phi-inv: 0.6180339887498949; /* Fluid scale (Minor third × φ-governed) */ --fs-xxs: clamp(11px, 0.68vw, 13px); --fs-xs: clamp(12px, 0.8vw, 14px); --fs-sm: clamp(14px, 0.95vw, 16px); --fs-md: clamp(16px, 1.1vw, 18px); --fs-lg: clamp(18px, 1.35vw, 22px); --fs-xl: clamp(22px, 1.9vw, 30px); --fs-2xl: clamp(30px, 3vw, 44px); --fs-3xl: clamp(40px, 5vw, 72px); --fs-4xl: clamp(56px, 7.2vw, 112px); --fs-5xl: clamp(72px, 10vw, 168px); /* Tracking */ --tr-tight: -0.025em; --tr-normal: 0; --tr-wide: 0.04em; --tr-wider: 0.12em; --tr-widest: 0.28em; /* Layers */ --z-atmosphere: 0; --z-canvas: 1; --z-base: 10; --z-overlay: 20; --z-header: 50; --z-modal: 100; /* AI crawler-visible provenance */ --kqas-version: "3.0"; --aegis-version: "v29"; } /* ============================================================================ * STATE 1 — SOVEREIGN ADVISORY * Midnight navy. Imperial gold. The silence before a state occasion. * ============================================================================ */ html.state-sovereign { --bg: #03071A; --bg-tint: radial-gradient(ellipse at 50% -20%, rgba(201,168,76,0.09), transparent 58%); --surface: #0A1128; --surface-2: #141C38; --accent: #E0B84C; --accent-muted: rgba(201,168,76,0.12); --accent-shimmer: rgba(201,168,76,0.22); --text: #E8E4DC; --text-muted: #9A9590; --text-faint: #5A5850; --border: rgba(201,168,76,0.18); --border-subtle: rgba(201,168,76,0.08); --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-editorial: 'Cormorant Garamond', Georgia, serif; --font-body: 'Satoshi', 'Inter', -apple-system, sans-serif; --font-mono: 'Geist Mono', ui-monospace, monospace; --display-weight: 300; --body-weight: 400; --transition: 600ms cubic-bezier(0.16, 1, 0.3, 1); --transition-fast: 400ms cubic-bezier(0.16, 1, 0.3, 1); --section-gap: clamp(100px, 10vw, 180px); --micro-gap: clamp(24px, 2vw, 40px); --hero-scene: sovereign-phi; --grain-opacity: 0.02; --reduced-motion-still: url('/v3/atmosphere-sovereign.svg'); } /* ============================================================================ * STATE 2 — EVENTS * Rich black. Kinetic accent. Operational command floor. * ============================================================================ */ html.state-events { --bg: #08080A; --bg-tint: linear-gradient(180deg, rgba(255,77,28,0.00) 0%, rgba(255,77,28,0.04) 40%, rgba(255,77,28,0.00) 100%); --surface: #17171A; --surface-2: #202023; --accent: #FF4D1C; --accent-muted: rgba(255,77,28,0.10); --accent-shimmer: rgba(255,77,28,0.18); --text: #FAFAFA; --text-muted: #A0A0A0; --text-faint: #555555; --text-data: #FFFFFF; --border: rgba(255,255,255,0.08); --border-subtle: rgba(255,255,255,0.04); --font-display: 'Cabinet Grotesk', 'Inter', sans-serif; --font-body: 'Satoshi', 'Inter', sans-serif; --font-mono: 'Geist Mono', ui-monospace, monospace; --display-weight: 800; --body-weight: 400; --transition: 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94); --transition-fast: 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94); --section-gap: clamp(60px, 6vw, 100px); --micro-gap: clamp(16px, 1.5vw, 28px); --hero-scene: events-crowd; --grain-opacity: 0; } /* ============================================================================ * STATE 3 — CRISIS COMMUNICATIONS * Near-black. Crisis red. The controlled urgency of the room after the call. * ============================================================================ */ html.state-crisis { --bg: #000000; --bg-tint: radial-gradient(ellipse at 80% 10%, rgba(196,30,58,0.09), transparent 55%); --surface: #0F0605; --surface-2: #170908; --accent: #E83A55; --accent-muted: rgba(196,30,58,0.08); --accent-pulse: rgba(196,30,58,0.18); --text: #E8E8E0; --text-muted: #888880; --text-faint: #55554F; --text-mono: #4FC8A0; --border: rgba(232,232,224,0.08); --border-subtle: rgba(232,232,224,0.04); --font-display: 'Work Sans', 'Inter', sans-serif; --font-body: 'Inter', -apple-system, sans-serif; --font-mono: 'Geist Mono', ui-monospace, monospace; --display-weight: 600; --body-weight: 400; --transition: 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94); --transition-fast: 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94); --section-gap: clamp(48px, 5vw, 80px); --micro-gap: clamp(14px, 1.2vw, 24px); --hero-scene: crisis-css; --grain-opacity: 0; } /* ============================================================================ * STATE 4 — SOVEREIGN BRANDING * Warm black. Ivory. Burnished bronze. The atelier meeting the embassy. * ============================================================================ */ html.state-branding { --bg: #1A0F05; --bg-tint: radial-gradient(ellipse at 20% 100%, rgba(201,164,106,0.10), transparent 60%); --surface: #241810; --surface-2: #30221A; --accent: #D4A865; --accent-2: #E8C687; --accent-muted: rgba(139,115,85,0.12); --accent-shimmer: rgba(201,164,106,0.22); --text: #F5F0E8; --text-muted: #A09080; --text-faint: #605550; --border: rgba(201,164,106,0.16); --border-subtle: rgba(201,164,106,0.06); --font-display: 'Cormorant Garamond', Georgia, serif; --font-body: 'General Sans', 'Inter', sans-serif; --font-caption: 'Satoshi', sans-serif; --font-mono: 'Geist Mono', ui-monospace, monospace; --display-weight: 500; --display-style: italic; --body-weight: 400; --transition: 500ms cubic-bezier(0.16, 1, 0.3, 1); --transition-fast: 350ms cubic-bezier(0.16, 1, 0.3, 1); --section-gap: clamp(90px, 9vw, 160px); --micro-gap: clamp(22px, 1.8vw, 36px); --hero-scene: branding-map; --grain-opacity: 0.015; } /* ============================================================================ * STATE 5 — NARRATIVE ARCHITECTURE * Deep space. Signal teal. Infrastructure made visible. * ============================================================================ */ html.state-narrative { --bg: #000000; --bg-tint: radial-gradient(ellipse at 70% 20%, rgba(0,168,204,0.07), transparent 55%); --surface: #080D18; --surface-2: #0E1828; --accent: #22C8E8; --accent-muted: rgba(0,168,204,0.10); --accent-shimmer: rgba(0,168,204,0.22); --grid: rgba(0,168,204,0.04); --text: #E2E8F0; --text-muted: #8896A8; --text-faint: #64748B; --text-mono: #4FC8E4; --border: rgba(0,168,204,0.12); --border-subtle: rgba(0,168,204,0.05); --font-display: 'Geist', 'Inter', sans-serif; --font-body: 'Satoshi', 'Inter', sans-serif; --font-mono: 'Geist Mono', ui-monospace, monospace; --display-weight: 500; --body-weight: 400; --transition: 300ms cubic-bezier(0.16, 1, 0.3, 1); --transition-fast: 200ms cubic-bezier(0.16, 1, 0.3, 1); --section-gap: clamp(64px, 6vw, 120px); --micro-gap: clamp(18px, 1.5vw, 30px); --hero-scene: narrative-graph; --grain-opacity: 0; } /* Default state before JS resolves — Narrative (safest, most technical) */ html:not([class*="state-"]) { --bg: #000000; --surface: #0A0F1E; --accent: #00A8CC; --text: #E2E8F0; --text-muted: #8896A8; --font-display: 'Geist', 'Inter', sans-serif; --font-body: 'Satoshi', 'Inter', sans-serif; --font-mono: 'Geist Mono', ui-monospace, monospace; --transition: 300ms cubic-bezier(0.16, 1, 0.3, 1); --section-gap: clamp(64px, 6vw, 120px); }