/* ============================================================================
   AIVE ONE — Design Tokens  ·  v4.0  ·  MONOLITH
   Extends v3 with MONOLITH neutral-ramp theme.
   All v3 token names preserved. MONOLITH adds: monolith-blue/green/orange themes.
   ========================================================================== */

/* ── v3 base (all themes: dark, light, saffron, synthesis, high-contrast) ── */
/* ── 1 · PRIMITIVES ──────────────────────────────────────────────────────── */

:root {
  /* Spectrum */
  --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-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);
  --p-prism:   linear-gradient(100deg,var(--p-teal),var(--p-blue) 55%,var(--p-coral));

  /* Neutral ramp */
  --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;

  /* MONOLITH neutral ramp */
  --m-canvas:  #050505;
  --m-surface: #0a0a0a;
  --m-raised:  #111111;
  --m-lift:    #1a1a1a;
  --m-hairline:#161616;
  --m-ghost:   #1e1e1e;
  --m-border:  #252525;
  --m-text-1:  #e8e8e8;
  --m-text-2:  #888888;
  --m-text-3:  #4a4a4a;
  --m-text-4:  #2e2e2e;
  --m-action:  #ffffff;
  --m-blue:    #00BFFF;
  --m-green:   #39FF14;
  --m-orange:  #FF6700;

  /* 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;

  /* Scalars */
  --scale-type: 1;
  --scale-radius: 1;
  --scale-density: 1;

  /* Type scale */
  --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 */
  --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-11:calc(44px * var(--scale-density));
  --space-12:calc(48px * var(--scale-density));
  --space-13:calc(56px * var(--scale-density));
  --space-14:calc(64px * var(--scale-density));
  --space-15:calc(80px * 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 */
  --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 */
  --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 */
  --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;
  --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);
  --text:    var(--n-50);
  --text-2:  var(--n-300);
  --text-3:  #707b91;
  --text-on-accent:#06122e;
  --text-inverse: var(--n-900);
  --on-ai:   #ffffff;
  --accent:        var(--p-blue);
  --accent-hover:  #7ba2ff;
  --accent-soft:   var(--p-blue-soft);
  --ai:            var(--accent);
  --ai-soft:       var(--accent-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);
  --gradient-surface: linear-gradient(160deg, rgba(95,139,255,.06), rgba(95,139,255,.03) 60%, transparent);
  --gradient-ai:      linear-gradient(125deg, var(--p-blue), var(--p-teal));
  --gradient-accent:  linear-gradient(125deg, #6f96ff, #3a63e8);
  --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(95,139,255,.45), 0 10px 34px rgba(95,139,255,.30);
  --clip-video: var(--p-blue);
  --clip-audio: var(--p-teal);
  --clip-title: var(--p-blue);
  --clip-gen:   var(--p-coral);
  --viz-1:var(--p-blue); --viz-2:var(--p-teal); --viz-3:var(--p-coral);
  --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(--accent);
  --ai-soft:      var(--accent-soft);
  --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(58,99,232,.03) 60%, transparent);
  --gradient-ai:      linear-gradient(125deg, var(--p-blue-2), var(--p-teal-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(58,99,232,.30), 0 10px 30px rgba(58,99,232,.18);
}

/* ── High-contrast modifier ───────────────────────────────────────────────── */
[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 ─────────────────────────────────────────────────────────── */
[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="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); }

/* ── Saffron theme ────────────────────────────────────────────────────────── */
[data-theme="saffron"] {
  color-scheme: dark;
  --bg-deep:   #0c0904; --bg: #0c0904; --surface: #0c0904; --surface-2: #1e1208;
  --surface-3: #251a0c; --elevated: #1e1208; --inset: #080602;
  --overlay: rgba(12,9,4,.68); --scrim: rgba(12,9,4,.86);
  --border: rgba(245,224,192,.10); --border-soft: rgba(245,224,192,.06);
  --border-strong: rgba(245,224,192,.20); --hairline: rgba(245,224,192,.07);
  --text: #f5e0c0; --text-2: #5a4030; --text-3: #3a2510;
  --text-on-accent: #0c0904; --text-inverse: #f5e0c0; --on-ai: #0c0904;
  --accent: #e69628; --accent-hover: #e8b840; --accent-soft: rgba(230,150,40,.12);
  --ai: #e69628; --ai-soft: rgba(230,150,40,.10);
  --success: #5a9a70; --success-soft: rgba(90,154,112,.12);
  --danger: #c84c38; --danger-soft: rgba(200,76,56,.12);
  --warning: #e69628; --warning-soft: rgba(230,150,40,.10);
  --focus-ring: #e69628; --ring: 0 0 0 3px rgba(230,150,40,.18);
  --gradient-surface: linear-gradient(160deg, rgba(230,150,40,.06), rgba(200,76,56,.03) 60%, transparent);
  --gradient-ai: linear-gradient(125deg, #e69628, #c84c38);
  --gradient-accent: linear-gradient(125deg, #e8b840, #c84c38);
  --clip-video: #e69628; --clip-audio: #5a9a70; --clip-title: #e69628; --clip-gen: #c84c38;
  --glow-accent: 0 0 0 1px rgba(230,150,40,.40), 0 10px 34px rgba(230,150,40,.25);
  --glow-ai: 0 0 0 1px rgba(230,150,40,.40), 0 10px 34px rgba(230,150,40,.25);
}

/* ── Synthesis theme ──────────────────────────────────────────────────────── */
[data-theme="synthesis"] {
  color-scheme: dark;
  --bg-deep: #050908; --bg: #080c0b; --surface: #080c0b; --surface-2: #142420;
  --surface-3: #1e3a32; --elevated: #142420; --inset: #030605;
  --overlay: rgba(5,9,8,.68); --scrim: rgba(5,9,8,.86);
  --border: rgba(216,232,226,.10); --border-soft: rgba(216,232,226,.06);
  --border-strong: rgba(216,232,226,.20); --hairline: rgba(216,232,226,.07);
  --text: #d8e8e2; --text-2: #3a5a50; --text-3: #1e3a32;
  --text-on-accent: #040e0c; --text-inverse: #d8e8e2; --on-ai: #ffffff;
  --accent: #6dbfaa; --accent-hover: #8acfbc; --accent-soft: rgba(109,191,170,.12);
  --ai: #c4789a; --ai-soft: rgba(196,120,154,.10);
  --success: #6dbfaa; --success-soft: rgba(109,191,170,.12);
  --danger: #c4785a; --danger-soft: rgba(196,120,90,.12);
  --warning: #b87868; --warning-soft: rgba(184,120,104,.12);
  --focus-ring: #6dbfaa; --ring: 0 0 0 3px rgba(109,191,170,.18);
  --gradient-surface: linear-gradient(160deg, rgba(109,191,170,.06), rgba(196,120,154,.03) 60%, transparent);
  --gradient-ai: linear-gradient(125deg, #c4789a, #b87868);
  --gradient-accent: linear-gradient(125deg, #8acfbc, #6dbfaa);
  --clip-video: #6dbfaa; --clip-audio: #6dbfaa; --clip-title: #c4789a; --clip-gen: #b87868;
  --glow-accent: 0 0 0 1px rgba(109,191,170,.40), 0 10px 34px rgba(109,191,170,.25);
  --glow-ai: 0 0 0 1px rgba(196,120,154,.40), 0 10px 34px rgba(196,120,154,.25);
}

/* ── MONOLITH base ramp (shared by all three monolith accent variants) ───── */
[data-theme^="monolith-"] {
  color-scheme: dark;
  --bg-deep:   #050505;
  --bg:        #0a0a0a;
  --surface:   #0a0a0a;
  --surface-2: #111111;
  --surface-3: #1a1a1a;
  --elevated:  #111111;
  --inset:     #050505;
  --overlay:   rgba(5,5,5,.72);
  --scrim:     rgba(5,5,5,.90);
  --border:        rgba(232,232,232,.09);
  --border-soft:   rgba(232,232,232,.05);
  --border-strong: rgba(232,232,232,.18);
  --hairline:      rgba(232,232,232,.07);
  --text:    #e8e8e8;
  --text-2:  #888888;
  --text-3:  #4a4a4a;
  --text-4:  #2e2e2e;
  --text-on-accent: #121212;
  --text-inverse:   #0a0a0a;
  --disabled-bg:     #121212;
  --disabled-border: #3a3a3a;
  --ghost-border:    #1e1e1e;
  --action-press:    #e6e6e6;
  --on-ai: #e8e8e8;
  --ai:            var(--accent);
  --ai-soft:       var(--accent-soft);
  --success:       #39FF14;
  --success-soft:  rgba(57,255,20,.10);
  --danger:        #FF6700;
  --danger-soft:   rgba(255,103,0,.10);
  --warning:       #FF6700;
  --warning-soft:  rgba(255,103,0,.10);
  --gradient-surface: linear-gradient(160deg, rgba(0,191,255,.04), rgba(0,191,255,.02) 60%, transparent);
  --gradient-ai:      linear-gradient(125deg, var(--p-blue), var(--p-teal));
  --shadow-2xs: 0 1px 1px rgba(0,0,0,.40);
  --shadow-xs:  0 1px 2px rgba(0,0,0,.50), 0 1px 1px rgba(0,0,0,.35);
  --shadow-sm:  0 2px 4px rgba(0,0,0,.45), 0 4px 10px rgba(0,0,0,.40);
  --shadow-md:  0 4px 8px rgba(0,0,0,.50), 0 12px 28px rgba(0,0,0,.55);
  --shadow-lg:  0 8px 16px rgba(0,0,0,.55), 0 24px 56px rgba(0,0,0,.60);
  --shadow-xl:  0 16px 32px rgba(0,0,0,.60), 0 40px 88px rgba(0,0,0,.70);
  --clip-video: #00BFFF;
  --clip-audio: #39FF14;
  --clip-title: var(--p-blue);
  --clip-gen:   #FF6700;
  --viz-1:#00BFFF; --viz-2:#39FF14; --viz-3:var(--p-coral);
  --viz-4:#FF6700; --viz-5:var(--p-amber); --viz-6:#7fd0e8;
  /* M10 site ambient — neutral fallback; per-theme blocks override */
  --site-seam:     rgba(232,232,232,.09);
  --site-vignette: transparent;
  --site-nav-edge: transparent;
}

/* ── MONOLITH Blue (default accent) ──────────────────────────────────────── */
[data-theme="monolith-blue"] {
  --accent:       #00BFFF;
  --accent-hover: #33ccff;
  --accent-soft:  rgba(0,191,255,.14);
  --focus-ring:   #00BFFF;
  --ring:         0 0 0 3px rgba(0,191,255,.14);
  --gradient-accent: linear-gradient(125deg, #33ccff, #0099cc);
  --glow-accent: 0 0 0 1px rgba(0,191,255,.30), 0 10px 34px rgba(0,191,255,.20);
  --glow-ai:     0 0 0 1px rgba(0,191,255,.30), 0 10px 34px rgba(0,191,255,.18);
  --info:        #00BFFF;
  /* M10 site ambient */
  --site-seam:     rgba(0,191,255,.14);
  --site-vignette: rgba(0,191,255,.055);
  --site-nav-edge: rgba(0,191,255,.26);
}

/* ── MONOLITH Green ───────────────────────────────────────────────────────── */
[data-theme="monolith-green"] {
  --accent:       #39FF14;
  --accent-hover: #5fff3a;
  --accent-soft:  rgba(57,255,20,.14);
  --focus-ring:   #39FF14;
  --ring:         0 0 0 3px rgba(57,255,20,.14);
  --gradient-accent: linear-gradient(125deg, #5fff3a, #28cc0f);
  --glow-accent: 0 0 0 1px rgba(57,255,20,.30), 0 10px 34px rgba(57,255,20,.20);
  --glow-ai:     0 0 0 1px rgba(0,191,255,.30), 0 10px 34px rgba(0,191,255,.18);
  --info:        #39FF14;
  --text-on-accent: #050505;
  /* M10 site ambient */
  --site-seam:     rgba(57,255,20,.14);
  --site-vignette: rgba(57,255,20,.055);
  --site-nav-edge: rgba(57,255,20,.26);
}

/* ── MONOLITH Orange ──────────────────────────────────────────────────────── */
[data-theme="monolith-orange"] {
  --accent:       #FF6700;
  --accent-hover: #ff8533;
  --accent-soft:  rgba(255,103,0,.14);
  --focus-ring:   #FF6700;
  --ring:         0 0 0 3px rgba(255,103,0,.14);
  --gradient-accent: linear-gradient(125deg, #ff8533, #cc5200);
  --glow-accent: 0 0 0 1px rgba(255,103,0,.30), 0 10px 34px rgba(255,103,0,.20);
  --glow-ai:     0 0 0 1px rgba(0,191,255,.30), 0 10px 34px rgba(0,191,255,.18);
  --info:        #FF6700;
  /* M10 site ambient */
  --site-seam:     rgba(255,103,0,.14);
  --site-vignette: rgba(255,103,0,.055);
  --site-nav-edge: rgba(255,103,0,.26);
}

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