/* ============================================================================
   AIVE ONE — Design Tokens  ·  v2.0  ·  "The Prism, refined"
   FULL VISUAL REVAMP — same contract, elevated implementation.
   Every token NAME is preserved (all 15 surfaces + the legacy bridge depend on
   them), only VALUES are upgraded: richer cinematic neutrals with clearer
   elevation stepping, premium layered shadows, crisper hairlines, stronger
   spectrum presence, refined motion. A handful of ADDITIVE tokens (--surface-3,
   --ring, --gradient-*, --shadow-2xs, --on-ai) power the upgraded components.
   Modes: theme (dark|light) · contrast (normal|high) · density · type/radius scalars.
   ========================================================================== */

:root {
  /* ── 1 · PRIMITIVES ──────────────────────────────────────────────────── */

  /* Spectrum — the only brand hues. Order is fixed: teal→blue→violet→coral. */
  --p-teal:    #3fcbb4;  --p-teal-2:   #2a9d8a;  --p-teal-soft:   rgba(63,203,180,.15);
  --p-blue:    #5f8bff;  --p-blue-2:   #3a63e8;  --p-blue-soft:   rgba(95,139,255,.16);
  --p-violet:  #a07cff;  --p-violet-2: #7b5cf0;  --p-violet-soft: rgba(160,124,255,.16);
  --p-coral:   #ff7e5c;  --p-coral-2:  #f0623f;  --p-coral-soft:  rgba(255,126,92,.15);
  --p-amber:   #f2b54d;  --p-amber-2:  #d8993a;  --p-amber-soft:  rgba(242,181,77,.15); /* functional, non-brand */
  --p-prism:   linear-gradient(100deg,var(--p-teal),var(--p-blue) 42%,var(--p-violet) 74%,var(--p-coral));

  /* Neutral — refined cinematic cool-slate ramp (950 darkest → 0 white) */
  --n-950:#06090f; --n-900:#0a0e15; --n-800:#10151f; --n-700:#19202d; --n-600:#28313f;
  --n-500:#3b4557; --n-400:#5b6679; --n-300:#8b95a8; --n-200:#bcc4d2; --n-100:#dee3eb;
  --n-50:#eef1f6;  --n-25:#f7f8fb;  --n-0:#ffffff;

  /* Type families */
  --font-display: "Sora", system-ui, -apple-system, sans-serif;
  --font-sans:    "Space Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* Runtime tweak scalars (overridden by the in-page controls) */
  --scale-type: 1;
  --scale-radius: 1;
  --scale-density: 1;        /* 0.85 compact · 1 comfortable · 1.18 spacious */

  /* Type scale — fluid where it helps, fixed in product chrome */
  --fs-display: calc(clamp(3.2rem, 6vw, 5.75rem) * var(--scale-type));
  --fs-h1:  calc(clamp(2.2rem, 4vw, 3.4rem) * var(--scale-type));
  --fs-h2:  calc(clamp(1.8rem, 3vw, 2.4rem) * var(--scale-type));
  --fs-h3:  calc(1.5rem * var(--scale-type));
  --fs-h4:  calc(1.25rem * var(--scale-type));
  --fs-lg:  calc(1.125rem * var(--scale-type));
  --fs-base:calc(1rem * var(--scale-type));
  --fs-sm:  calc(0.875rem * var(--scale-type));
  --fs-xs:  calc(0.75rem * var(--scale-type));
  --fs-2xs: calc(0.6875rem * var(--scale-type));

  --lh-tight: 1.04; --lh-snug: 1.25; --lh-normal: 1.55; --lh-relaxed: 1.7;
  --tracking-tight: -0.035em; --tracking-snug: -0.012em; --tracking-wide: 0.08em; --tracking-caps: 0.2em;
  --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;

  /* Spacing — 4px base, density-aware */
  --space-0:0;
  --space-1: calc(4px  * var(--scale-density));
  --space-2: calc(8px  * var(--scale-density));
  --space-3: calc(12px * var(--scale-density));
  --space-4: calc(16px * var(--scale-density));
  --space-5: calc(20px * var(--scale-density));
  --space-6: calc(24px * var(--scale-density));
  --space-8: calc(32px * var(--scale-density));
  --space-10:calc(40px * var(--scale-density));
  --space-12:calc(48px * var(--scale-density));
  --space-16:calc(64px * var(--scale-density));
  --space-20:calc(80px * var(--scale-density));
  --space-24:calc(96px * var(--scale-density));
  --space-32:calc(128px * var(--scale-density));

  /* Radius — tweakable */
  --radius-xs: calc(5px  * var(--scale-radius));
  --radius-sm: calc(9px  * var(--scale-radius));
  --radius-md: calc(13px * var(--scale-radius));
  --radius-lg: calc(18px * var(--scale-radius));
  --radius-xl: calc(24px * var(--scale-radius));
  --radius-2xl:calc(32px * var(--scale-radius));
  --radius-pill:999px;
  --radius-circle:50%;

  /* Control heights — density-aware */
  --ctl-sm: calc(32px * var(--scale-density));
  --ctl-md: calc(40px * var(--scale-density));
  --ctl-lg: calc(48px * var(--scale-density));

  /* Layout */
  --container-narrow:720px; --container:1080px; --container-wide:1320px; --container-full:1600px;
  --nav-h:64px; --sidebar-w:264px; --sidebar-collapsed:64px;
  --bp-sm:480px; --bp-md:768px; --bp-lg:1024px; --bp-xl:1280px; --bp-2xl:1536px;

  /* Blur */
  --blur-sm:8px; --blur-md:18px; --blur-lg:36px;

  /* Z-index */
  --z-base:0; --z-raised:10; --z-dropdown:1000; --z-sticky:1100; --z-overlay:1200;
  --z-modal:1300; --z-popover:1400; --z-toast:1500; --z-tooltip:1600; --z-max:9999;

  /* Motion — refined */
  --dur-instant:80ms; --dur-fast:150ms; --dur-normal:240ms; --dur-slow:380ms; --dur-ambient:1200ms;
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --ease-in:cubic-bezier(.4,0,1,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-emphasis:cubic-bezier(.34,1.45,.5,1);
}

/* ── 2 · SEMANTICS · DARK (default) ──────────────────────────────────────── */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --bg:           var(--n-900);
  --bg-deep:      var(--n-950);
  --surface:      var(--n-800);
  --surface-2:    var(--n-700);
  --surface-3:    #222b3a;            /* additive — third elevation step */
  --elevated:     #1d2532;
  --inset:        var(--n-950);
  --overlay:      rgba(6,9,15,.68);
  --scrim:        rgba(6,9,15,.86);

  --border:        rgba(238,241,246,.11);
  --border-soft:   rgba(238,241,246,.06);
  --border-strong: rgba(238,241,246,.22);
  --hairline:      rgba(238,241,246,.08);   /* additive */

  --text:    var(--n-50);
  --text-2:  var(--n-300);
  --text-3:  #707b91;
  --text-on-accent:#06122e;
  --text-inverse: var(--n-900);
  --on-ai:   #ffffff;                  /* additive — text on AI gradient */

  --accent:        var(--p-blue);
  --accent-hover:  #7ba2ff;
  --accent-soft:   var(--p-blue-soft);
  --ai:            var(--p-violet);
  --ai-soft:       var(--p-violet-soft);
  --success:       var(--p-teal);
  --success-soft:  var(--p-teal-soft);
  --danger:        var(--p-coral);
  --danger-soft:   var(--p-coral-soft);
  --warning:       var(--p-amber);
  --warning-soft:  var(--p-amber-soft);
  --info:          var(--p-blue);
  --focus-ring:    var(--p-blue);
  --ring:          0 0 0 3px var(--accent-soft);   /* additive */

  /* additive premium gradients */
  --gradient-surface: linear-gradient(160deg, rgba(95,139,255,.06), rgba(160,124,255,.03) 60%, transparent);
  --gradient-ai:      linear-gradient(125deg, var(--p-violet), var(--p-blue));
  --gradient-accent:  linear-gradient(125deg, #6f96ff, #3a63e8);

  /* Elevation / shadow — premium layered (dark) */
  --shadow-2xs: 0 1px 1px rgba(0,0,0,.30);
  --shadow-xs:  0 1px 2px rgba(0,0,0,.35), 0 1px 1px rgba(0,0,0,.25);
  --shadow-sm:  0 2px 4px rgba(0,0,0,.30), 0 4px 10px rgba(0,0,0,.30);
  --shadow-md:  0 4px 8px rgba(0,0,0,.28), 0 12px 28px rgba(0,0,0,.38);
  --shadow-lg:  0 8px 16px rgba(0,0,0,.30), 0 24px 56px rgba(0,0,0,.46);
  --shadow-xl:  0 16px 32px rgba(0,0,0,.34), 0 40px 88px rgba(0,0,0,.56);
  --glow-accent: 0 0 0 1px rgba(95,139,255,.45), 0 10px 34px rgba(95,139,255,.30);
  --glow-ai:     0 0 0 1px rgba(160,124,255,.45), 0 10px 34px rgba(160,124,255,.30);

  /* clip / data-viz roles (editor) */
  --clip-video: var(--p-blue);
  --clip-audio: var(--p-teal);
  --clip-title: var(--p-violet);
  --clip-gen:   var(--p-coral);
  --viz-1:var(--p-blue); --viz-2:var(--p-teal); --viz-3:var(--p-violet);
  --viz-4:var(--p-coral); --viz-5:var(--p-amber); --viz-6:#7fd0e8;
}

/* ── 2 · SEMANTICS · LIGHT ───────────────────────────────────────────────── */
[data-theme="light"] {
  color-scheme: light;
  --bg:        #f4f6fb;
  --bg-deep:   #e9edf4;
  --surface:   #ffffff;
  --surface-2: #f1f4f9;
  --surface-3: #e9edf4;
  --elevated:  #ffffff;
  --inset:     #eef1f6;
  --overlay:   rgba(20,27,43,.42);
  --scrim:     rgba(20,27,43,.6);

  --border:        rgba(10,15,26,.12);
  --border-soft:   rgba(10,15,26,.07);
  --border-strong: rgba(10,15,26,.24);
  --hairline:      rgba(10,15,26,.08);

  --text:    #0a0f1a;
  --text-2:  #4f5d76;
  --text-3:  #76819a;
  --text-on-accent:#ffffff;
  --text-inverse: var(--n-50);
  --on-ai:   #ffffff;

  --accent:       var(--p-blue-2);
  --accent-hover: #2d52d6;
  --accent-soft:  rgba(58,99,232,.10);
  --ai:           var(--p-violet-2);
  --ai-soft:      rgba(123,92,240,.10);
  --success:      #1f8a5b;
  --success-soft: rgba(31,138,91,.12);
  --danger:       #cf4324;
  --danger-soft:  rgba(207,67,36,.10);
  --warning:      #a06a12;
  --warning-soft: rgba(160,106,18,.12);
  --info:         var(--p-blue-2);
  --focus-ring:   var(--p-blue-2);
  --ring:         0 0 0 3px var(--accent-soft);

  --gradient-surface: linear-gradient(160deg, rgba(58,99,232,.05), rgba(123,92,240,.03) 60%, transparent);
  --gradient-ai:      linear-gradient(125deg, var(--p-violet-2), var(--p-blue-2));
  --gradient-accent:  linear-gradient(125deg, #4f74ec, #2d52d6);

  --shadow-2xs: 0 1px 1px rgba(16,24,40,.04);
  --shadow-xs:  0 1px 2px rgba(16,24,40,.06), 0 1px 1px rgba(16,24,40,.04);
  --shadow-sm:  0 2px 4px rgba(16,24,40,.06), 0 4px 12px rgba(16,24,40,.08);
  --shadow-md:  0 4px 8px rgba(16,24,40,.06), 0 12px 28px rgba(16,24,40,.10);
  --shadow-lg:  0 8px 16px rgba(16,24,40,.08), 0 24px 56px rgba(16,24,40,.12);
  --shadow-xl:  0 16px 32px rgba(16,24,40,.10), 0 40px 88px rgba(16,24,40,.16);
  --glow-accent: 0 0 0 1px rgba(58,99,232,.30), 0 10px 30px rgba(58,99,232,.18);
  --glow-ai:     0 0 0 1px rgba(123,92,240,.30), 0 10px 30px rgba(123,92,240,.18);
}

/* ── high-contrast modifier (stacks on either theme) ─────────────────────── */
[data-contrast="high"] {
  --border:        var(--text);
  --border-soft:   var(--text-3);
  --border-strong: var(--text);
  --hairline:      var(--text-3);
  --text-2: var(--text);
}

/* ── density presets ─────────────────────────────────────────────────────── */
[data-density="compact"]    { --scale-density:0.85; }
[data-density="comfortable"]{ --scale-density:1; }
[data-density="spacious"]   { --scale-density:1.18; }

/* ── accent remap (tweak: which spectrum hue drives primary actions) ─────── */
[data-accent="teal"]   { --accent:var(--p-teal);   --accent-hover:#5fd9c6; --accent-soft:var(--p-teal-soft);   --focus-ring:var(--p-teal); --text-on-accent:#04231f; --gradient-accent:linear-gradient(125deg,#52d6c0,#2a9d8a); }
[data-accent="violet"] { --accent:var(--p-violet); --accent-hover:#b59bff; --accent-soft:var(--p-violet-soft); --focus-ring:var(--p-violet); --text-on-accent:#1a0f3a; --gradient-accent:linear-gradient(125deg,#b196ff,#7b5cf0); }
[data-accent="coral"]  { --accent:var(--p-coral);  --accent-hover:#ff9880; --accent-soft:var(--p-coral-soft);  --focus-ring:var(--p-coral); --text-on-accent:#3a0f06; --gradient-accent:linear-gradient(125deg,#ff9576,#f0623f); }

@media (prefers-reduced-motion: reduce) {
  :root { --dur-instant:0ms; --dur-fast:0ms; --dur-normal:0ms; --dur-slow:0ms; --dur-ambient:0ms; }
}