/* Copied verbatim from the Illumin3D brand source: Adds Creator/Illumin3D/Brand/core/tokens.css (v3 "Made of Light", 2026-10-05).
Do not edit here; change the brand source, then copy it again. The storefront maps its legacy
variables and classes onto these tokens in brand-v3.css. */
/*
ILLUMIN3D BRAND TOKENS — v3 "Made of Light" (2026-10-05)
The single source of truth for web, social, video and email.
Rules: ../BRAND.md · Generated JSON: tokens.json (python3 sync_json.py)
Fonts (Google Fonts, SIL OFL):
*/
:root {
/* ===== COLOR ============================================================ */
/* Midnight — the dark canvas (violet-tinted, never pure black) */
--i3-midnight: #07060d; /* page / poster background */
--i3-night: #0d0b14; /* alternate dark band */
--i3-panel: #121019; /* cards on Midnight */
--i3-raised: #1b1824; /* inputs, raised cards, chips */
--i3-rule: #2a2636; /* solid hairlines on dark */
/* Illumin Violet — from the logo mark (#965efa). */
--i3-violet-50: #f6f1ff;
--i3-violet-100: #ece2ff;
--i3-violet-200: #d9c6ff; /* "Lumen": accent text on dark (12.9:1 on Midnight) */
--i3-violet-300: #c1a2fd; /* links, labels on dark (9.5:1) */
--i3-violet-400: #ab7ffb; /* glow, icons, big accent words */
--i3-violet: #965efa; /* LOGO VIOLET — mark, focus, highlights */
--i3-violet-600: #7c41e8; /* smallest violet text on light (5.1:1 on Daylight) */
--i3-violet-700: #6430c4; /* links, labels on light (7.0:1) */
--i3-violet-800: #4c2596;
--i3-violet-900: #2f1762;
--i3-ink: #1a0632; /* LOGO INK — wordmark, headings & buttons on light */
/* Daylight — the light canvas */
--i3-daylight: #f7f5fb; /* page / poster background */
--i3-mist: #eeecf3; /* alternate light band, image wells */
--i3-white: #ffffff; /* cards on Daylight */
/* Neutral text */
--i3-grey-200: #dcd8e6;
--i3-grey-300: #bcb6cb; /* secondary text on dark (10.3:1) */
--i3-grey-400: #968fa5; /* tertiary text on dark only (6.5:1) */
--i3-grey-500: #6b6479; /* secondary text on light (5.2:1) */
--i3-grey-600: #443f52;
/* Signal — LED colors. ONLY for live data: scores, price moves, status. Never brand chrome. */
--i3-signal-green: #3ce6ac; /* up, live, in stock */
--i3-signal-red: #ff5470; /* down, loss, alert */
--i3-signal-amber: #ffb648; /* pending, back soon, warning */
--i3-signal-cyan: #45d6ff; /* info, weather */
/* Signal on light backgrounds (AA text) */
--i3-signal-green-ink: #0e7a52;
--i3-signal-red-ink: #b3263c;
--i3-signal-amber-ink: #8a5a00;
--i3-star: #ffc94d; /* review stars only */
/* ===== LIGHT EFFECTS ==================================================== */
--i3-halo: radial-gradient(closest-side, rgba(150, 94, 250, 0.42), rgba(150, 94, 250, 0.10) 55%, rgba(150, 94, 250, 0) 100%);
--i3-floor-glow: radial-gradient(70% 50% at 50% 100%, rgba(150, 94, 250, 0.38), rgba(150, 94, 250, 0) 70%);
--i3-ambient: radial-gradient(55% 60% at 12% 8%, rgba(150, 94, 250, 0.16), transparent 70%),
radial-gradient(45% 55% at 92% 88%, rgba(150, 94, 250, 0.10), transparent 70%);
--i3-layer-lines: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 4px);
--i3-led-dots: radial-gradient(circle at center, rgba(217, 198, 255, 0.16) 0 1.1px, transparent 1.6px) 0 0 / 7px 7px;
--i3-gradient-cta: linear-gradient(135deg, #f1e9ff 0%, #d9c6ff 45%, #ab7ffb 100%);
--i3-gradient-text: linear-gradient(100deg, #d9c6ff 0%, #ab7ffb 100%);
/* ===== TYPE ============================================================= */
/* One family, four widths. Doto is for LED numerals only. Email falls back to Arial/Helvetica. */
--i3-font: "Archivo", "Helvetica Neue", Arial, sans-serif;
--i3-font-led: "Doto", "Archivo", monospace;
--i3-stretch-display: 112%; /* headlines */
--i3-stretch-body: 100%; /* paragraphs, UI */
--i3-stretch-label: 125%; /* labels, nav, eyebrows, LUMAGLOW */
--i3-stretch-impact: 62%; /* condensed caps for ads and video */
/* Web scale (fluid). Use with font-stretch above. */
--i3-size-display-xl: clamp(2.6rem, 1.6rem + 4vw, 5rem); /* 42–80 */
--i3-size-display-l: clamp(2.1rem, 1.5rem + 2.4vw, 3.6rem); /* 34–58 */
--i3-size-display-m: clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem); /* 26–37 */
--i3-size-title: 1.375rem; /* 22 */
--i3-size-lead: 1.1875rem; /* 19 */
--i3-size-body: 1rem; /* 16 */
--i3-size-small: 0.875rem; /* 14 */
--i3-size-label: 0.75rem; /* 12 */
--i3-weight-display: 600;
--i3-weight-title: 650;
--i3-weight-body: 400;
--i3-weight-label: 600;
--i3-weight-impact: 800;
--i3-track-display: -0.025em;
--i3-track-label: 0.2em;
--i3-track-wordmark: 0.32em; /* LUMAGLOW-style wide caps (weight 300) */
/* Social / video canvas scale (fixed px at 1080 wide) */
--i3-poster-impact: 168px;
--i3-poster-display: 96px;
--i3-poster-title: 52px;
--i3-poster-body: 36px;
--i3-poster-label: 24px;
/* ===== SPACE & SHAPE ==================================================== */
--i3-space-1: 4px; --i3-space-2: 8px; --i3-space-3: 12px; --i3-space-4: 16px;
--i3-space-5: 24px; --i3-space-6: 32px; --i3-space-7: 48px; --i3-space-8: 64px;
--i3-space-9: 96px; --i3-space-10: 128px;
--i3-section-y: clamp(72px, 6vw + 40px, 128px);
--i3-gutter: clamp(20px, 4vw, 48px);
--i3-container: 1240px;
--i3-measure: 60ch;
--i3-poster-margin: 72px; /* social safe margin at 1080 wide */
--i3-radius-s: 8px; /* chips, small thumbs */
--i3-radius-m: 14px; /* inputs, tiles */
--i3-radius-l: 22px; /* cards */
--i3-radius-xl: 32px; /* feature panels, media frames */
--i3-radius-pill: 999px; /* buttons */
--i3-line-dark: rgba(217, 198, 255, 0.14);
--i3-line-dark-strong: rgba(217, 198, 255, 0.28);
--i3-line-light: rgba(26, 6, 50, 0.10);
--i3-line-light-strong: rgba(26, 6, 50, 0.20);
--i3-shadow-s: 0 2px 10px rgba(7, 6, 13, 0.10);
--i3-shadow-m: 0 14px 36px rgba(7, 6, 13, 0.18);
--i3-shadow-l: 0 34px 90px rgba(7, 6, 13, 0.48);
--i3-shadow-glow: 0 10px 34px rgba(150, 94, 250, 0.36);
/* ===== MOTION =========================================================== */
--i3-ease: cubic-bezier(0.2, 0, 0, 1);
--i3-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--i3-ease-light: cubic-bezier(0.65, 0, 0.35, 1); /* "power on": slow-in, slow-out */
--i3-dur-fast: 160ms;
--i3-dur: 280ms;
--i3-dur-slow: 720ms;
--i3-dur-power-on: 1200ms;
}