/* ============================================================ SeneGence Learning Hub — design tokens Light + dark are token SETS; components never hardcode color. Theme resolution: [data-theme] wins, else prefers-color-scheme. ============================================================ */ :root { /* Brand (SeneGence Identity Guide 2023) */ --navy: #0C2340; --reflex: #001489; --gold: #9C8A5A; --gold-deep: #7E6E42; --gold-bright: #CBA14E; --gold-light: #E7CE92; /* Jewel accents — the ONLY choices the Studio exposes */ --jewel-emerald: #00843D; --jewel-aqua: #00857C; --jewel-sapphire: #0B3D63; --jewel-amethyst: #5F259F; --jewel-ruby: #A6192E; --jewel-coral: #E63E2E; --jewel-jasper: #F2A900; /* Type — Didot display / Avenir body (brand-spec stacks) */ --font-display: 'Didot', 'GFS Didot', 'Playfair Display', Georgia, serif; --font-body: 'Avenir Next', 'Avenir', 'Montserrat', system-ui, -apple-system, sans-serif; /* ============ RUNTIME DESIGN KNOBS ============ These vars are overridable at runtime from the Studio's Design panel (registry: worker/src/design-knobs.ts; applied by applySettings() in api.js). Every consumer uses var(--knob, default) so absence = designed default. */ /* --glass-blur set below per pointer type; Studio override wins */ /* --glass-intensity multiplies all glass fill alphas (default 1) */ /* --r-card card/sheet radius (default 24px) */ /* --motion-scale multiplies all durations (default 1) */ /* --hero-overlay-alpha hero darkening (default .55) */ /* --section-scale multiplies section spacing (default 1) */ /* --type-scale multiplies display type only (default 1) */ /* Fluid type scale (display sizes × --type-scale knob) */ --text-hero: calc(clamp(2.6rem, 7vw + 1rem, 6.5rem) * var(--type-scale, 1)); --text-title: calc(clamp(1.8rem, 3.5vw + .5rem, 3rem) * var(--type-scale, 1)); --text-card-title: calc(clamp(1.25rem, 2vw + .5rem, 1.6rem) * var(--type-scale, 1)); --text-body: clamp(1rem, .5vw + .85rem, 1.125rem); --text-caption: .8125rem; /* 8px spacing grid */ --sp-1: 8px; --sp-2: 12px; --sp-3: 16px; --sp-4: 24px; --sp-5: 32px; --sp-6: 48px; --sp-7: 80px; --section-y: calc(clamp(64px, 12vh, 160px) * var(--section-scale, 1)); --section-x: clamp(20px, 5vw, 60px); /* Radii — concentric: inner derives from card radius automatically */ --r-card: 24px; --r-inner: calc(var(--r-card, 24px) - 6px); --r-pill: 980px; /* Motion (all durations × --motion-scale knob) */ --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --ease-out: cubic-bezier(.25, .46, .45, .94); --ease-gentle: cubic-bezier(.4, 0, .2, 1); --dur-micro: calc(.3s * var(--motion-scale, 1)); --dur-enter: calc(.7s * var(--motion-scale, 1)); /* Layout */ --nav-h: 60px; --tabbar-h: 76px; --content-max: 1180px; /* Glass blur budget: coarse pointers get less (perf) */ --glass-blur: 12px; --accent: var(--gold); } @media (pointer: fine) { :root { --glass-blur: 16px; } } @media (pointer: coarse) { :root { --glass-blur: 8px; } } /* ---------- LIGHT (default) ---------- */ :root, [data-theme="light"] { color-scheme: light; --ground: #ffffff; --ground-alt: #f5f5f7; --ink: var(--navy); --ink-secondary: #86868b; --ink-on-accent: #ffffff; --glass-fill: rgba(255, 255, 255, calc(.12 * var(--glass-intensity, 1))); --glass-fill-strong: rgba(255, 255, 255, calc(.55 * var(--glass-intensity, 1))); --glass-border: rgba(255, 255, 255, .28); --glass-rim-top: rgba(255, 255, 255, .75); --glass-rim-bottom: rgba(255, 255, 255, .30); --glass-shadow: 0 8px 32px rgba(12, 35, 64, .14); --glass-solid-fallback: rgba(255, 255, 255, .88); --glass-ink: var(--navy); --hero-overlay: linear-gradient(180deg, rgba(12,35,64, calc(var(--hero-overlay-alpha, .55) * .45)), rgba(12,35,64, var(--hero-overlay-alpha, .55))); --accent-text: var(--gold-deep); } /* ---------- DARK ---------- */ [data-theme="dark"] { color-scheme: dark; --ground: #0a1526; --ground-alt: #0e1c33; --ink: #f5f5f7; --ink-secondary: #a1a1a6; --ink-on-accent: #0C2340; --glass-fill: rgba(12, 35, 64, calc(.38 * var(--glass-intensity, 1))); --glass-fill-strong: rgba(12, 35, 64, calc(.72 * var(--glass-intensity, 1))); --glass-border: rgba(231, 206, 146, .22); --glass-rim-top: rgba(255, 255, 255, .45); --glass-rim-bottom: rgba(203, 161, 78, .25); --glass-shadow: 0 8px 32px rgba(0, 0, 0, .45); --glass-solid-fallback: rgba(14, 28, 51, .94); --glass-ink: #f5f5f7; --hero-overlay: linear-gradient(180deg, rgba(4,10,20, calc(var(--hero-overlay-alpha, .55) * .64)), rgba(4,10,20, calc(var(--hero-overlay-alpha, .55) * 1.27))); --accent: var(--gold-bright); --accent-text: var(--gold-light); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --ground: #0a1526; --ground-alt: #0e1c33; --ink: #f5f5f7; --ink-secondary: #a1a1a6; --ink-on-accent: #0C2340; --glass-fill: rgba(12, 35, 64, calc(.38 * var(--glass-intensity, 1))); --glass-fill-strong: rgba(12, 35, 64, calc(.72 * var(--glass-intensity, 1))); --glass-border: rgba(231, 206, 146, .22); --glass-rim-top: rgba(255, 255, 255, .45); --glass-rim-bottom: rgba(203, 161, 78, .25); --glass-shadow: 0 8px 32px rgba(0, 0, 0, .45); --glass-solid-fallback: rgba(14, 28, 51, .94); --glass-ink: #f5f5f7; --hero-overlay: linear-gradient(180deg, rgba(4,10,20, calc(var(--hero-overlay-alpha, .55) * .64)), rgba(4,10,20, calc(var(--hero-overlay-alpha, .55) * 1.27))); --accent: var(--gold-bright); --accent-text: var(--gold-light); } } /* Background-layer gradients (Studio "Visuals" choices) */ .bg-navy-gold { background: linear-gradient(160deg, var(--navy) 0%, #1a3a5f 55%, var(--gold-deep) 140%); } .bg-emerald { background: linear-gradient(160deg, #04281a 0%, var(--jewel-emerald) 130%); } .bg-amethyst { background: linear-gradient(160deg, #1d0b33 0%, var(--jewel-amethyst) 130%); } .bg-ruby { background: linear-gradient(160deg, #2b040d 0%, var(--jewel-ruby) 130%); } .bg-sapphire { background: linear-gradient(160deg, #041526 0%, var(--jewel-sapphire) 130%); } .bg-aqua { background: linear-gradient(160deg, #012a27 0%, var(--jewel-aqua) 130%); } .bg-jasper { background: linear-gradient(160deg, #2e2003 0%, var(--jewel-jasper) 140%); }