/* ============================================================= GENESIS AI STUDIO — DESIGN TOKENS (colors & type) Canonical token layer distilled from the codebase. Tactical-HUD aesthetic: deep navy backgrounds, parchment-gold accents, dual product themes (Studio violet/cyan, Interiors green). Fonts are loaded via tags in the host HTML. ============================================================= */ :root { /* ---------- CORE SURFACE / HUD CHROME ---------- */ --bg-deep: #050f1c; --bg-base: #091421; --bg-mid: #0e1a2c; --surface-container-low: #121c2a; --surface-container: #16202e; --surface-container-hi: #212b39; --surface-container-max: #2b3544; --surface-bright: #303a48; --hud-panel: #0f1624; --hud-panel-soft: #101a2a; --hud-overlay: rgba(7, 10, 16, 0.8); /* ---------- BORDERS / OUTLINES ---------- */ --hud-outline: rgba(255, 255, 255, 0.18); --hud-outline-strong: rgba(255, 255, 255, 0.35); --hud-outline-soft: rgba(255, 255, 255, 0.08); --outline: #958e9c; --outline-variant: #494551; /* ---------- TEXT ---------- */ --fg-1: #ffffff; --fg-2: #d9e3f6; --fg-3: #cbc4d3; --fg-muted: #b7becb; --fg-dim: #8792af; --fg-faint: #6c799d; /* ---------- BRAND ACCENT (parchment gold) ---------- */ --hud-accent: #f5d7a1; --hud-accent-warm: #ffd97d; --hud-accent-glow: rgba(245, 215, 161, 0.5); --hud-accent-soft: rgba(245, 215, 161, 0.14); /* ---------- STUDIO THEME (violet/cyan) ---------- */ --studio-primary: #d5bfff; --studio-secondary: #89ceff; --studio-accent: #bd9dff; --studio-accent-rgb: 213, 191, 255; --studio-glow: rgba(137, 206, 255, 0.35); --studio-magenta: #ec63ff; --studio-on-primary: #3b1a77; /* ---------- INTERIORS THEME (emerald) ---------- */ --interiors-primary: #34D399; --interiors-secondary: #10B981; --interiors-accent: #059669; --interiors-accent-rgb: 16, 185, 129; --interiors-glow: rgba(16, 185, 129, 0.4); --interiors-on-primary: #064e3b; /* ---------- LEGACY ORANGE (marketing / CTA) ---------- */ --orange-primary: #F97316; --orange-secondary: #FB923C; --orange-accent: #FDBA74; --orange-deep: #EA580C; /* ---------- SEMANTIC ---------- */ --error: #ffb4ab; --error-container: #93000a; --on-error: #690005; --success: #34D399; --warning: #FDBA74; --info: #89ceff; /* ---------- TYPE FAMILIES ---------- */ --font-display: 'Space Grotesk', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-mono: Consolas, 'SFMono-Regular', ui-monospace, monospace; --font-icon: 'Material Symbols Outlined'; /* ---------- TYPE SCALE ---------- */ --fs-hero: clamp(2.5rem, 5vw, 4rem); --fs-h1: 2.25rem; --fs-h2: 1.875rem; --fs-h3: 1.5rem; --fs-h4: 1.25rem; --fs-body-lg: 1rem; --fs-body: 0.875rem; --fs-sm: 0.78rem; --fs-xs: 0.7rem; --fs-2xs: 0.625rem; /* ---------- LINE HEIGHTS ---------- */ --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.45; --lh-relaxed: 1.6; /* ---------- TRACKING ---------- */ --tracking-kicker: 0.18em; --tracking-label: 0.1em; --tracking-tight: -0.01em; /* ---------- WEIGHTS ---------- */ --fw-light: 300; --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* ---------- RADII ---------- */ --radius-0: 0; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 1rem; --radius-2xl: 1.25rem; --radius-pill: 999px; /* ---------- SPACING (8-pt with 4-pt half-step) ---------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; /* ---------- SHADOWS ---------- */ --shadow-sm: 0 2px 8px rgba(0,0,0,0.35); --shadow-md: 0 10px 22px rgba(0,0,0,0.30); --shadow-lg: 0 18px 40px rgba(0,0,0,0.40); --shadow-xl: 0 24px 50px rgba(0,0,0,0.50); --shadow-inset-top: inset 0 1px 0 rgba(255,255,255,0.06); --shadow-inset-soft: inset 0 1px 0 rgba(255,255,255,0.04); --shadow-glow-accent: 0 0 16px var(--hud-accent-glow); --shadow-glow-studio: 0 0 18px rgba(189, 157, 255, 0.45); --shadow-glow-interiors: 0 0 18px var(--interiors-glow); /* ---------- HUD CLIP PATHS ---------- */ --clip-corner-sm: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px); --clip-corner-md: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); --clip-corner-lg: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)); /* ---------- BACKGROUNDS ---------- */ --bg-page-gradient: linear-gradient(180deg, #091421 0%, #0e1a2c 50%, #091421 100%); --bg-noise-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E"); --bg-vignette: radial-gradient(ellipse at center, rgba(0,0,0,0) 45%, rgba(0,0,0,0.4) 100%); /* ---------- TRANSITIONS ---------- */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-decel: cubic-bezier(0.0, 0, 0.2, 1); --ease-accel: cubic-bezier(0.4, 0, 1, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 0.18s; --dur-base: 0.22s; --dur-slow: 0.4s; } /* ============================================================= SEMANTIC TYPOGRAPHY PRIMITIVES Apply with classes — easier than memorising var combinations. ============================================================= */ .gx-hero { font-family: var(--font-display); font-size: var(--fs-hero); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg-1); } .gx-h1 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: var(--fw-bold); line-height: var(--lh-snug); color: var(--fg-1); } .gx-h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-snug); color: var(--fg-1); } .gx-h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-snug); color: var(--fg-2); } .gx-h4 { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--fg-2); } .gx-body { font-family: var(--font-body); font-size: var(--fs-body); font-weight: var(--fw-normal); line-height: var(--lh-relaxed); color: var(--fg-2); } .gx-body-lg { font-family: var(--font-body); font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--fg-2); } .gx-small { font-family: var(--font-body); font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--fg-3); } .gx-mono { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--fg-2); } .gx-kicker { font-family: var(--font-display); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--fg-muted); } .gx-label { font-family: var(--font-body); font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-faint); } .gx-eyebrow { font-family: var(--font-display); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-kicker); text-transform: uppercase; color: var(--hud-accent); } /* Themed text helpers */ .gx-on-studio { color: var(--studio-secondary); } .gx-on-interiors { color: var(--interiors-primary); } .gx-on-accent { color: var(--hud-accent); text-shadow: 0 0 10px var(--hud-accent-glow); } /* Material Symbols icon baseline — pair with .material-symbols-outlined */ .material-symbols-outlined { font-family: var(--font-icon); font-weight: 400; font-style: normal; font-size: 20px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }