/* ═══════════════════════════════════════════════════
   DESIGN SYSTEM — QpiAI PRO
   Source of truth: "Design System – QpiAI Products" handoff
   (colors_and_type.css · Brand-Palette/Frame-81)
   Brand: Electric Violet #4C00FE · Deep Violet #1F0068
          Melrose #C9B3FF · Light Cobalt #8EAAD8
          Alice Blue #EEF5FF · White
   Fashion Fuchsia is intentionally absent.
═══════════════════════════════════════════════════ */

:root {
  /* ── Brand anchors ────────────────────────────── */
  --electric-violet: #4C00FE;
  --deep-violet:     #1F0068;
  --melrose:         #C9B3FF;
  --cobalt:          #8EAAD8;
  --cobalt-strong:   #365AFF;
  --alice-blue:      #EEF5FF;

  /* Primary scale (Electric Violet, DS 50→900) */
  --primary-50:  #F4F0FF;
  --primary-100: #E5DBFF;
  --primary-200: #D4C2FF;
  --primary-300: #B79BFF;
  --primary-400: #9747FF;
  --primary-500: #7033FE;
  --primary-600: #4C00FE;
  --primary-700: #4100D8;
  --primary-800: #3500B2;
  --primary-900: #1F0068;

  /* Cobalt scale (Tertiary-2) */
  --cobalt-50:  #F2F5FB;
  --cobalt-100: #E8EEF7;
  --cobalt-200: #BBCCE8;
  --cobalt-300: #8EAAD8;
  --cobalt-400: #5C82BC;
  --cobalt-500: #365AFF;

  /* ── Backgrounds (dark default — DS grey-800/900 ramp) ── */
  --background:   #0B0B0E;
  --card:         #151519;
  --card-2:       #1E1D22;
  --popover:      #151519;
  --secondary:    #1E1D22;
  --muted:        #1E1D22;
  --bg-tinted:    #1A0E3A;   /* deep violet wash */
  --bg-tinted-2:  #15233D;   /* cool cobalt wash */

  /* ── Text ─────────────────────────────────────── */
  --foreground:   #FFFFFF;
  --fg-2:         #EEF5FF;   /* alice blue body on dark */
  --muted-fg:     #B7B5BA;
  --subtle:       #929098;

  /* ── Borders & inputs ─────────────────────────── */
  --border:       rgba(255,255,255,0.1);
  --border-2:     rgba(255,255,255,0.06);
  --input:        rgba(255,255,255,0.15);
  --ring:         #7033FE;

  /* ── Brand semantic ───────────────────────────── */
  --primary:      #7033FE;   /* dark-mode primary (DS border-brand-strong) */
  --primary-fg:   #FFFFFF;
  --primary-h:    #9747FF;   /* hover (DS dark fg-brand) */

  /* Violet spectrum (replaces old chart scale) */
  --purple-1:     #C9B3FF;   /* melrose */
  --purple-2:     #B79BFF;
  --purple-3:     #9747FF;
  --purple-4:     #7033FE;
  --purple-5:     #4C00FE;

  /* Dim overlays */
  --primary-dim:    rgba(112,51,254,0.12);
  --primary-dim2:   rgba(112,51,254,0.18);
  --primary-border: rgba(151,71,255,0.28);

  /* ── Secondary accent — Light Cobalt (was fuchsia) ── */
  --accent:        #8EAAD8;
  --accent-strong: #5C82BC;
  --accent-light:  #BBCCE8;
  --accent-dim:    rgba(142,170,216,0.12);
  /* legacy aliases (old --pink names point at cobalt now) */
  --pink:          #8EAAD8;
  --pink-light:    #BBCCE8;
  --pink-dim:      rgba(142,170,216,0.12);

  /* ── Status (DS semantic anchors) ─────────────── */
  --success:      #0FC100;
  --success-dim:  rgba(15,193,0,0.12);
  --destructive:  #FF5C5C;
  --warning:      #FF7F23;

  /* ── Gradients (DS /Gradients — fuchsia-free set) ── */
  --gradient-brand-deep: linear-gradient(180deg, #4C00FE 0%, #1F0068 100%);
  --gradient-brand-soft: linear-gradient(180deg, #4C00FE 0%, #C9B3FF 100%);
  --gradient-brand-cool: linear-gradient(135deg, #7033FE 0%, #8EAAD8 100%);

  /* ── Typography (DS: Inter UI · Poppins accents · Jura spec) ── */
  --font:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-accent: 'Inter', system-ui, sans-serif;   /* agenthive: Inter everywhere */
  --font-spec:   'Inter', system-ui, sans-serif;
  --mono:        'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* Type scale — agenthive exact */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */

  /* Line heights */
  --leading-tight:   1.25;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  /* Letter spacing */
  --tracking-tight:    -0.02em;
  --tracking-normal:    0;
  --tracking-wide:      0.025em;
  --tracking-wider:     0.05em;
  --tracking-widest:    0.1em;

  /* Font weights */
  --fw-normal:    400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* ── Radius (DS rounding conventions) ─────────── */
  --radius:   10px;
  --r-xs:      4px;
  --r-sm:      6px;
  --r-md:      8px;     /* cards, panels */
  --r-base:   10px;
  --r-lg:     14px;
  --r-xl:     20px;     /* hero, large surfaces */
  --r-full: 9999px;

  /* ── Shadows (DS /Elevation) ──────────────────── */
  --shadow-sm:  0 3px 6px 0 rgba(0,0,0,0.5);
  --shadow-md:  0 4px 8px 0 rgba(0,0,0,0.55);
  --shadow-lg:  0 4px 8px 2px rgba(0,0,0,0.55);
  --shadow-card: 0 8px 16px 2px rgba(0,0,0,0.6);
  --shadow-focus: 0 0 0 3px rgba(112,51,254,0.3);

  /* Glow */
  --glow-sm:  0 0 8px 2px rgba(112,51,254,0.4);
  --glow-lg:  0 0 20px 6px rgba(112,51,254,0.55);
  --glow-primary: 0 0 24px rgba(151,71,255,0.3);

  /* ── Transitions ──────────────────────────────── */
  --duration: 0.15s;
  --duration-md: 0.2s;
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);

  /* Theme curtain */
  --curtain-duration: 0.9s;

  /* ── Layout ───────────────────────────────────── */
  --max-w:       1400px;
  --section-px:  32px;
  --section-py:  96px;
  --feature-py:  88px;

  /* ── Spacing (DS 4px base) ────────────────────── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
}

/* ── Light theme — white / alice blue + electric violet ── */
[data-theme="light"] {
  /* Backgrounds — white surfaces over a faint alice-blue page */
  --background:   #FBFBFC;   /* DS bg-page (grey-50) */
  --card:         #FFFFFF;
  --card-2:       #F1F1F4;
  --popover:      #FFFFFF;
  --secondary:    #F1F1F4;
  --muted:        #F1F1F4;
  --bg-tinted:    #F4F0FF;   /* DS brand-tinted region */
  --bg-tinted-2:  #E8EEF7;   /* cobalt tinted */

  /* Text — DS warm violet-leaning greys */
  --foreground:   #1E1D22;   /* grey-700 display */
  --fg-2:         #34313A;   /* grey-600 strong body */
  --muted-fg:     #4A4653;   /* grey-500 body */
  --subtle:       #929098;   /* grey-400 captions */

  /* Borders */
  --border:       #DBDADD;   /* grey-200 hairline */
  --border-2:     #EBEAED;
  --input:        #B7B5BA;   /* grey-300 */
  --ring:         #4C00FE;

  /* Brand — full electric violet on light */
  --primary:      #4C00FE;
  --primary-fg:   #FFFFFF;
  --primary-h:    #4100D8;

  --purple-1:     #B79BFF;
  --purple-2:     #9747FF;
  --purple-3:     #7033FE;
  --purple-4:     #4C00FE;
  --purple-5:     #3500B2;

  --primary-dim:    rgba(76,0,254,0.07);
  --primary-dim2:   rgba(76,0,254,0.12);
  --primary-border: rgba(76,0,254,0.25);

  /* Cobalt accent on light leans stronger for contrast */
  --accent:        #5C82BC;
  --accent-strong: #365AFF;
  --accent-light:  #8EAAD8;
  --accent-dim:    rgba(92,130,188,0.12);
  --pink:          #5C82BC;
  --pink-light:    #8EAAD8;
  --pink-dim:      rgba(92,130,188,0.12);

  /* Status */
  --success:      #0DA400;
  --success-dim:  rgba(13,164,0,0.1);
  --destructive:  #D40000;
  --warning:      #D9540A;

  /* Glows tighten on light */
  --glow-sm:      0 0 8px 2px rgba(76,0,254,0.2);
  --glow-lg:      0 0 20px 6px rgba(76,0,254,0.3);
  --glow-primary: 0 0 24px rgba(76,0,254,0.18);

  /* Shadows (DS light elevation) */
  --shadow-sm:  0 1px 2px 0 rgba(21,21,25,0.04),
                0 3px 6px 0 rgba(17,17,17,0.08);
  --shadow-md:  0 4px 8px 0 rgba(74,70,83,0.16);
  --shadow-lg:  0 4px 8px 2px rgba(74,70,83,0.16);
  --shadow-card: 0 0 0 1px rgba(74,70,83,0.06),
                 0 8px 16px 2px rgba(74,70,83,0.12);
  --shadow-focus: 0 0 0 3px rgba(76,0,254,0.25);
}