/* OCTO design tokens, Release 03. Three tiers: primitive, semantic, component.
   Components read semantic tokens only. Themes and densities remap semantic tokens. */
@font-face { font-family: 'Space Grotesk'; font-weight: 500; font-display: swap; src: url('../assets/fonts/space-grotesk-500.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 700; font-display: swap; src: url('../assets/fonts/space-grotesk-700.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('../assets/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url('../assets/fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url('../assets/fonts/inter-600.woff2') format('woff2'); }

:root {
  /* ---------- Primitive: abyss neutrals ---------- */
  --abyss-1000: #02040A; --abyss-950: #050912; --abyss-900: #0A1020; --abyss-850: #0F1730;
  --abyss-800: #151F3D; --abyss-700: #22305A; --abyss-500: #4A5A86; --abyss-300: #8F9BC4; --abyss-100: #EAF0FF;
  /* ---------- Primitive: signal hues (OKLCH tuned, sRGB fallback first) ---------- */
  --cyan-300: #8AE9FF; --cyan-500: #3FD8FF; --cyan-700: #0A8FC2;
  --plasma-300: #C7A6FF; --plasma-500: #8B5CFF; --plasma-700: #5B2BD9;
  --azure-500: #3D7BFF; --lime-500: #C6F36B; --amber-500: #FFC44D; --coral-500: #FF5C7A;
  --cyan-500: oklch(83% .14 215); --plasma-500: oklch(62% .24 290); --azure-500: oklch(62% .2 262);

  /* ---------- Semantic: surfaces ---------- */
  --bg: var(--abyss-1000);
  --bg-sunk: var(--abyss-1000);
  --surface-1: rgba(12, 17, 36, .62);
  --surface-2: rgba(8, 12, 26, .78);   /* pulled toward abyss 950 so emissive light has contrast */
  --surface-3: rgba(22, 26, 62, .74);
  --glass-tint: linear-gradient(155deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 42%, rgba(139,92,255,.05));
  --glass-blur: 22px;
  --stroke-1: rgba(160, 180, 255, .12);
  --stroke-2: rgba(160, 180, 255, .22);
  --stroke-focus: var(--cyan-500);
  --edge-hi: inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.03);

  /* ---------- Semantic: content ---------- */
  --fg: var(--abyss-100);
  --fg-2: rgba(234, 240, 255, .68);
  --fg-3: rgba(234, 240, 255, .46);
  --accent: var(--cyan-500);
  --accent-2: var(--plasma-500);
  --ok: var(--lime-500); --warn: var(--amber-500); --risk: var(--coral-500); --info: var(--azure-500);

  /* ---------- Semantic: energy (signature gradient and glow) ---------- */
  --energy: linear-gradient(110deg, var(--plasma-500), var(--azure-500) 55%, var(--cyan-500));
  --energy-soft: linear-gradient(110deg, rgba(139,92,255,.32), rgba(63,216,255,.14));
  --glow-sm: 0 0 12px rgba(63,216,255,.35);
  --glow-md: 0 0 24px rgba(139,92,255,.45), 0 0 2px rgba(199,166,255,.9);
  --glow-lg: 0 0 60px rgba(139,92,255,.35), 0 0 120px rgba(63,216,255,.14);

  /* ---------- Semantic: emissive tier (light, not just glass) ----------
     Color is the light source, radius is how far it bleeds, bloom is how much
     halo survives. Active and live states emit; resting states only reflect. */
  --emit-plasma: 155, 104, 255;      /* rgb triplet so opacity stays a token */
  --emit-cyan: 63, 216, 255;
  --emit-color: rgb(var(--emit-plasma));
  --emit-color-2: rgb(var(--emit-cyan));
  --glow-r-1: 6px; --glow-r-2: 16px; --glow-r-3: 36px; --glow-r-4: 72px;
  --bloom-1: .35; --bloom-2: .55; --bloom-3: .8;
  --emit-core: 0 0 2px rgba(255,255,255,.9);
  --emit-sm: 0 0 var(--glow-r-1) rgba(var(--emit-plasma), var(--bloom-3)), 0 0 var(--glow-r-2) rgba(var(--emit-plasma), var(--bloom-1));
  --emit-md: 0 0 var(--glow-r-2) rgba(var(--emit-plasma), var(--bloom-2)), 0 0 var(--glow-r-3) rgba(var(--emit-plasma), var(--bloom-1)), 0 0 var(--glow-r-4) rgba(var(--emit-cyan), calc(var(--bloom-1) * .4));
  --emit-cyan-md: 0 0 var(--glow-r-2) rgba(var(--emit-cyan), var(--bloom-2)), 0 0 var(--glow-r-3) rgba(var(--emit-cyan), var(--bloom-1));
  --edge-emit: linear-gradient(135deg, rgba(var(--emit-plasma), .9), rgba(var(--emit-plasma), .12) 38%, rgba(var(--emit-cyan), .1) 62%, rgba(var(--emit-cyan), .85));
  /* Stage: the product shot. One perspective, one slab tilt, one lift for the foreground panel */
  --stage-persp: 1800px;
  --stage-tilt: perspective(var(--stage-persp)) rotateY(-11deg) rotateX(4deg) scale(var(--stage-scale));
  --stage-scale: .9;       /* hero slab scale so slab, chart row and table sit above a 900px fold */
  --stage-tilt-fg: perspective(1200px) rotateY(-14deg) rotateX(7deg) rotateZ(-1.5deg) translateZ(30px);
  --stage-lift: 120px;
  --edge-rim: linear-gradient(135deg, rgba(var(--emit-plasma), 1), rgba(var(--emit-plasma), .7) 35%, rgba(120, 110, 255, .55) 55%, rgba(var(--emit-cyan), .8) 78%, rgba(var(--emit-cyan), 1));
  --stage-vignette: radial-gradient(120% 90% at 50% 40%, transparent 35%, var(--abyss-1000) 78%);
  --edge-lit: linear-gradient(135deg, rgba(var(--emit-plasma), 1), rgba(var(--emit-plasma), .25) 30%, transparent 50%, rgba(var(--emit-cyan), .25) 72%, rgba(var(--emit-cyan), 1));
  --wire-blur: 6px;
  --wire-w: 4.5px;        /* core stroke of a live flow wire */
  --wire-bloom-w: 18px;   /* blurred underlay painted in --energy */
  --wire-particle-r: 2.6px; /* flow particle radius */
  --wire-particle-d: 2.4s;  /* particle transit time per wire */

  /* ---------- Data viz: ordered categorical, sequential, diverging ---------- */
  --viz-1: var(--plasma-500); --viz-2: var(--cyan-500); --viz-3: var(--azure-500);
  --viz-4: var(--lime-500); --viz-5: var(--amber-500); --viz-6: var(--coral-500);
  --viz-grid: rgba(160, 180, 255, .08); --viz-axis: rgba(234, 240, 255, .42);
  --viz-seq: linear-gradient(90deg, #1B1446, #5B2BD9, #8B5CFF, #3FD8FF, #D8FAFF);
  --viz-div: linear-gradient(90deg, #FF5C7A, #3B1D3F, #0A1020, #12355C, #3FD8FF);

  /* ---------- Type ---------- */
  --font-display: 'Space Grotesk', Inter, Arial, sans-serif;
  --font-ui: Inter, Arial, Helvetica, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --t-ratio: 1.25;
  --t-0: 14px; --t--1: 12px; --t--2: 11px;
  --t-1: 16px; --t-2: 20px; --t-3: 25px; --t-4: 31px; --t-5: 39px;
  --t-6: clamp(49px, 4.4vw, 61px); --t-7: clamp(61px, 6.4vw, 96px);
  --lh-tight: 1.04; --lh-snug: 1.2; --lh-body: 1.55;
  --track-display: -0.03em; --track-label: 0.14em;
  --num: tabular-nums;

  /* ---------- Space (4pt base) ---------- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --gutter: clamp(16px, 2.2vw, 32px);

  /* ---------- Shape ---------- */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  /* ---------- Elevation (glass depth layers) ---------- */
  --e-0: none;
  --e-1: var(--edge-hi), 0 8px 24px rgba(0,0,0,.28);
  --e-2: var(--edge-hi), 0 18px 48px rgba(0,0,0,.42), 0 0 0 1px rgba(139,92,255,.06);
  --e-3: var(--edge-hi), 0 30px 80px rgba(0,0,0,.55), 0 0 40px rgba(139,92,255,.16);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --d-1: 120ms; --d-2: 200ms; --d-3: 360ms; --d-4: 640ms; --d-ambient: 6s;

  /* ---------- Layers ---------- */
  --z-base: 0; --z-raised: 10; --z-nav: 100; --z-overlay: 500; --z-toast: 900;

  /* ---------- 3D bridge (read by the WebGL layer) ---------- */
  --3d-key: #C7A6FF; --3d-rim: #3FD8FF; --3d-fill: #22305A;
  --3d-emissive: 2.4; --3d-unit: 1m;
}

/* Density modes remap space without touching components */
[data-density="compact"] { --s-3: 8px; --s-4: 12px; --s-5: 16px; --s-6: 24px; --t-0: 13px; }

@media (prefers-reduced-motion: reduce) {
  :root { --d-1: 0ms; --d-2: 0ms; --d-3: 0ms; --d-4: 0ms; }
}