/* ============================================================ KOTIA SHIPPING - DESIGN TOKENS LOCKED PALETTE: Vanguard Industrial Forge Dark "Deep Iron" (default) / Light "Raw Concrete" Set on : data-theme="dark|light" ============================================================ */ :root { /* Immutable brand primitives */ --ink: #0A0A0D; --ink-raised: #15171B; --ink-raised-2: #1C1F24; --concrete: #EFEEEA; --concrete-raised: #F7F6F3; --concrete-raised-2: #FCFBF9; --forge-dark-1: #FFD166; --forge-dark-2: #FF7A2E; --forge-dark-3: #E4501C; --forge-dark-4: #B8321A; --forge-dark-5: #6B1610; --forge-light-1: #D97706; --forge-light-2: #E4501C; --forge-light-3: #C43E12; --forge-light-4: #8C2A0D; --forge-light-5: #4A150A; /* Type */ --font-display: 'Geist', 'Space Grotesk', sans-serif; --font-body: 'Geist', 'Inter Tight', sans-serif; --font-mono: 'Geist Mono', 'JetBrains Mono', monospace; /* Scale (fluid) */ --text-hero: clamp(2.6rem, 8.5vw, 7rem); --text-h1: clamp(2.2rem, 5.5vw, 4.2rem); --text-h2: clamp(1.6rem, 3.6vw, 2.6rem); --text-h3: clamp(1.15rem, 2vw, 1.4rem); --text-body: clamp(0.98rem, 1.1vw, 1.08rem); --text-small: 0.85rem; --text-mono: 0.72rem; /* Rhythm */ --pad-x: clamp(1.25rem, 5vw, 4.5rem); --section-gap: clamp(5rem, 12vh, 9rem); --nav-h: 72px; /* Motion */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 0.25s; --dur-base: 0.5s; --dur-slow: 0.9s; /* Corners: sharp everywhere. Blueprint/industrial, not soft SaaS. */ --radius: 0px; } /* ---------- DARK — "Deep Iron" (default) ---------- */ :root[data-theme="dark"] { --bg: var(--ink); --bg-raised: var(--ink-raised); --bg-raised-2: var(--ink-raised-2); --text: #EDEEF0; --text-dim: #858C96; --line: rgba(228, 80, 28, 0.10); --line-strong: rgba(237, 238, 240, 0.24); --accent: #E4501C; --accent-bright: #FF6B33; --on-accent: var(--ink); --gradient-forge: linear-gradient(90deg, var(--forge-dark-1) 0%, var(--forge-dark-2) 35%, var(--forge-dark-3) 60%, var(--forge-dark-4) 85%, var(--forge-dark-5) 100%); --scrim: linear-gradient(180deg, rgba(10,10,13,0.25) 0%, rgba(10,10,13,0.74) 100%); } /* ---------- LIGHT — "Raw Concrete" ---------- */ :root[data-theme="light"] { --bg: var(--concrete); --bg-raised: var(--concrete-raised); --bg-raised-2: var(--concrete-raised-2); --text: #14161A; --text-dim: #666B72; --line: rgba(196, 62, 18, 0.10); --line-strong: rgba(20, 22, 26, 0.22); --accent: #C43E12; --accent-bright: #A8330D; --on-accent: var(--concrete); --gradient-forge: linear-gradient(90deg, var(--forge-light-1) 0%, var(--forge-light-2) 35%, var(--forge-light-3) 60%, var(--forge-light-4) 85%, var(--forge-light-5) 100%); --scrim: linear-gradient(180deg, rgba(239,238,234,0.18) 0%, rgba(239,238,234,0.82) 100%); } /* Blueprint hairline grid - behind hero-adjacent sections only, applied via .blueprint-grid class */ .blueprint-grid { background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 26px 26px; } /* Forge gradient text - ONE signature moment per page only (hero accent word, KM readout) */ .text-forge { background: var(--gradient-forge); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* Theme cross-fade */ html.theme-anim body, html.theme-anim .nav, html.theme-anim .blueprint-grid { transition: background-color 0.4s var(--ease-inout), color 0.4s var(--ease-inout), border-color 0.4s var(--ease-inout); }