/* ============================================================ HiVi Labs — Design Tokens · LUMINOUS GLASS (Light) The single source of truth for color, type, space, motion. Every section derives its values from here (see SKILL/design.md). THEME: 2027 luminous-glass light. Near-white cool surfaces, frosted glass panels, soft blue→teal aurora, vivid blue CTAs. Variable NAMES are stable across themes — only values change, so every section partial keeps resolving. Glass tokens added. ============================================================ */ :root { /* --- Surfaces: layered cool near-whites, not flat #fff --- */ --bg-base: #FBFCFF; /* page surface — faint cool tint */ --bg-raised: #FFFFFF; /* cards, panels */ --bg-raised-2: #F3F6FC; /* nested / hover panels */ --bg-inset: #EEF2FA; /* wells, code, inputs */ /* --- Borders & hairlines (low-opacity ink on light) --- */ --border: rgba(13, 22, 48, 0.10); --border-strong:rgba(13, 22, 48, 0.16); --border-faint: rgba(13, 22, 48, 0.06); /* --- Text (ink on light, cool-tinted) --- */ --text-hi: #0B1124; /* headings — near-black, cool */ --text-mid: #353D57; /* strong body */ --text-lo: #5C6580; /* muted body */ --text-faint: #888FA6; /* labels, captions */ /* --- Brand accents (cool/electric = autonomous systems) --- On light, "hi" = the high-emphasis (darker, readable) accent. */ --accent: #3B82F6; /* HiVi blue (from logo) — primary CTA, active */ --accent-hi: #2563EB; /* readable blue for text/links/eyebrows on light */ --accent-deep: #1E40AF; /* deep blue — gradients */ --accent-2: #0D9488; /* signal teal — agents / outcomes (readable on light) */ --accent-2-deep:#0F766E; --accent-2-bright:#00C2A0; /* bright teal — glows / dots only */ --warn: #DC2626; /* cost / tension numbers only */ --warn-deep: #991B1B; /* --- Light sources (soft colored washes on light) --- */ --glow-accent: radial-gradient(circle at center, rgba(59, 130, 246, 0.16), transparent 70%); --glow-teal: radial-gradient(circle at center, rgba(13, 148, 136, 0.13), transparent 70%); --glow-warn: radial-gradient(circle at center, rgba(220, 38, 38, 0.12), transparent 70%); /* --- Gradients --- */ --grad-accent: linear-gradient(135deg, #3B82F6, #1D4ED8); --grad-text: linear-gradient(118deg, #0B1124 0%, #2563EB 58%, #0D9488 120%); --grad-mesh: radial-gradient(60% 80% at 50% 0%, rgba(59,130,246,0.12), transparent 60%), radial-gradient(50% 60% at 85% 20%, rgba(13,148,136,0.08), transparent 60%); /* aurora field — soft, luminous, for section backdrops */ --grad-aurora: radial-gradient(45% 55% at 18% 12%, rgba(59,130,246,0.14), transparent 62%), radial-gradient(40% 50% at 86% 20%, rgba(0,194,160,0.12), transparent 60%), radial-gradient(55% 60% at 65% 95%, rgba(99,102,241,0.10), transparent 64%); /* --- Glass (the luminous-glass material) --- */ --glass-bg: rgba(255, 255, 255, 0.55); --glass-bg-strong:rgba(255, 255, 255, 0.72); --glass-border: rgba(255, 255, 255, 0.85); --glass-hairline: rgba(13, 22, 48, 0.08); --glass-blur: 18px; --glass-shadow: 0 18px 50px -22px rgba(16, 24, 60, 0.28), inset 0 1px 0 rgba(255,255,255,0.65); /* --- Typography --- */ --font-display: "Space Grotesk", "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* Type scale: 12 / 14 / 16 / 20 / 28 / 40 / 64 / 88 */ --fs-eyebrow: 0.8125rem; /* 13px */ --fs-12: 0.75rem; --fs-14: 0.875rem; --fs-16: 1rem; --fs-20: 1.25rem; --fs-28: 1.75rem; --fs-40: clamp(2rem, 4vw, 2.5rem); --fs-64: clamp(2.5rem, 6vw, 4rem); --fs-88: clamp(3rem, 8vw, 5.5rem); /* --- Big 2026 display scale (reference-driven: spacious, oversized) --- */ --fs-display: clamp(3.5rem, 7.5vw, 6.5rem); /* hero / page-hero showpiece */ --fs-h1: clamp(2.75rem, 5.5vw, 4.5rem); /* page-hero H1 */ --fs-h2: clamp(2.75rem, 5vw, 4.25rem); /* section heads */ --fs-h3: clamp(1.75rem, 2.6vw, 2.5rem); /* card / feature titles */ --fs-stat: clamp(3.25rem, 6.5vw, 5.5rem); /* oversized KPI numbers */ --fs-lead: clamp(1.15rem, 1.5vw, 1.45rem); /* section lead copy */ --lh-tight: 1.02; --lh-snug: 1.25; --lh-body: 1.6; --tracking-tight: -0.03em; --tracking-display: -0.04em; --tracking-eyebrow: 0.16em; /* --- Layout --- */ --maxw: 1200px; --maxw-wide: 1320px; --maxw-panel: 1240px; --gutter: clamp(1.25rem, 4vw, 2.5rem); --section-pad: clamp(96px, 13vw, 200px); /* airy 2026 vertical rhythm */ --section-pad-tight: clamp(64px, 9vw, 120px); --panel-pad: clamp(2rem, 5vw, 5.5rem); /* interior padding of pastel panels */ /* --- Radii --- */ --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-panel: clamp(28px, 3vw, 44px); /* large rounded section panels */ --r-pill: 999px; /* --- Pastel section-panel tints (<=8% sat over the light theme) --- */ --panel-sky: linear-gradient(180deg, #EAF2FB, #F4F8FE); /* products / workhorse */ --panel-mint: linear-gradient(180deg, #E6F7F2, #F2FBF8); /* automation / outcomes */ --panel-lav: linear-gradient(180deg, #EFEDFB, #F6F5FD); /* AI / agents */ --panel-blush: linear-gradient(180deg, #FBEFF0, #FCF6F7); /* human / testimonial only */ /* --- Elevation (soft, real shadows on light) --- */ --shadow-sm: 0 1px 2px rgba(16, 24, 60, 0.06), 0 2px 8px -4px rgba(16, 24, 60, 0.08); --shadow-md: 0 18px 44px -18px rgba(16, 24, 60, 0.22); --shadow-glow: 0 0 0 1px var(--border), 0 26px 60px -24px rgba(59, 130, 246, 0.30); /* --- Motion --- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 160ms; --dur-mid: 240ms; --dur-slow: 320ms; /* --- Z-index scale --- */ --z-nav: 1000; --z-mega: 1010; --z-modal: 1100; --z-toast: 1200; }