/* ============================================================
   ZOÉ SPARK — DESIGN TOKENS
   Pulled 1:1 from the Figma kit (local paint/text/effect styles).
   Tailwind-based ramps. Two themes (dark/light) + two module accents.
   ============================================================ */

:root {
  /* ---- RAW PALETTE (only ramps these modules use) ---- */
  --black:#000000; --white:#ffffff;

  --zinc-0:#fafafa;  --zinc-10:#f4f4f5; --zinc-20:#e4e4e7; --zinc-30:#d4d4d8;
  --zinc-40:#a1a1aa; --zinc-50:#71717a; --zinc-60:#52525b; --zinc-70:#3f3f46;
  --zinc-80:#27272a; --zinc-90:#18181b; --zinc-100:#09090b;

  --slate-10:#f1f5f9; --slate-40:#94a3b8; --slate-90:#0f172a; --slate-100:#020617;
  --gray-20:#d4d4d4; --gray-30:#ababab; --gray-90:#0c0c0c;

  /* brand + status hues (same in both themes; step chosen per theme) */
  --orange-40:#fb923c; --orange-50:#f97316; --orange-60:#ea580c;
  --purple-40:#c084fc; --purple-50:#a855f7; --purple-60:#9333ea;
  --emerald-40:#34d399; --emerald-50:#10b981; --emerald-60:#059669;
  --cyan-40:#22d3ee;   --cyan-50:#06b6d4;   --cyan-60:#0891b2;
  --amber-40:#fbbf24;  --amber-50:#f59e0b;  --amber-60:#d97706;
  --lime-40:#a3e635;   /* Figma Lime/40 — the recording waveform */
  --red-40:#f87171;    --red-50:#ef4444;    --red-60:#dc2626;

  /* ---- TYPOGRAPHY ---- */
  --font-sans:'Inter','SF Pro Text',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono','SF Mono',ui-monospace,monospace;
  --font-ar:'Noto Sans Arabic','Inter',system-ui,sans-serif;

  /* ---- SPACING (even scale) ---- */
  --sp-2:2px; --sp-4:4px; --sp-6:6px; --sp-8:8px; --sp-12:12px; --sp-16:16px;
  --sp-20:20px; --sp-24:24px; --sp-28:28px; --sp-32:32px; --sp-40:40px;
  --sp-48:48px; --sp-56:56px; --sp-64:64px;

  /* ---- RADIUS ---- */
  --r-xs:6px; --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-2xl:24px; --r-full:999px;

  /* ---- SHADOWS (from Shadows/* effect styles) ---- */
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow:0 1px 2px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.1);
  --shadow-md:0 2px 4px -1px rgba(0,0,0,.06),0 4px 6px -1px rgba(0,0,0,.1);
  --shadow-lg:0 4px 6px -2px rgba(0,0,0,.05),0 10px 15px -3px rgba(0,0,0,.12);
  --shadow-xl:0 10px 10px -5px rgba(0,0,0,.04),0 20px 25px -5px rgba(0,0,0,.2);
  --shadow-2xl:0 25px 50px -12px rgba(0,0,0,.45);

  --ease:cubic-bezier(.4,0,.2,1);
}

/* ============================  DARK (default)  ============================ */
:root,
[data-theme="dark"]{
  --page:var(--zinc-100);
  --page-2:#0d0d10;
  --surface:var(--zinc-90);
  --surface-raised:var(--zinc-80);
  --surface-hover:var(--zinc-70);
  --menu-bg:#1c1c20;

  --border:var(--zinc-80);
  --border-strong:var(--zinc-70);
  --border-hover:var(--zinc-60);   /* interactive-surface hover stroke — Figma Suggestion Card 5925:22628 */
  --border-subtle:rgba(255,255,255,.06);

  --text-primary:var(--slate-10);
  --text-secondary:var(--zinc-20);
  --text-muted:var(--zinc-40);
  --text-faint:var(--zinc-50);
  --icon:var(--gray-20);
  --icon-muted:var(--zinc-40);
  --on-accent:#ffffff;

  --success:var(--emerald-40); --success-soft:rgba(52,211,153,.15);
  --warning:var(--amber-40);   --warning-soft:rgba(251,191,36,.15);
  --danger:var(--red-40);      --danger-soft:rgba(248,113,113,.15);

  --scroll-thumb:rgba(255,255,255,.17);
  --scroll-thumb-hover:rgba(255,255,255,.32);
  color-scheme:dark;
}

/* ============================  LIGHT  ============================ */
[data-theme="light"]{
  --page:var(--zinc-0);
  --page-2:#f2f2f4;
  --surface:#ffffff;
  --surface-raised:var(--zinc-10);
  --surface-hover:var(--zinc-20);
  --menu-bg:#ffffff;

  --border:var(--zinc-20);
  --border-strong:var(--zinc-30);
  --border-hover:var(--zinc-40);   /* mirrored step of the dark Zinc/80→Zinc/60 hover stroke */
  --border-subtle:rgba(0,0,0,.06);

  --text-primary:var(--zinc-90);
  --text-secondary:var(--zinc-80);
  --text-muted:var(--zinc-60);
  --text-faint:var(--zinc-50);
  --icon:var(--zinc-60);
  --icon-muted:var(--zinc-50);
  --on-accent:#ffffff;

  --success:var(--emerald-60); --success-soft:rgba(5,150,105,.12);
  --warning:var(--amber-60);   --warning-soft:rgba(217,119,6,.12);
  --danger:var(--red-60);      --danger-soft:rgba(220,38,38,.10);

  --scroll-thumb:rgba(0,0,0,.16);
  --scroll-thumb-hover:rgba(0,0,0,.30);
  color-scheme:light;
}

/* ============================  MODULE ACCENT  ============================
   Investigation = Brand Primary (Orange/50)  ·  Chat = Brand Secondary (Purple/50) */
[data-module="investigation"]{
  --accent:var(--orange-50); --accent-hover:var(--orange-60); --accent-bright:var(--orange-40);
  --accent-soft:rgba(249,115,22,.14); --accent-border:rgba(249,115,22,.45);
  /* Brand Primary/10 + /20 — the light "on/selected" chips in the settings dropdown (Figma) */
  --accent-tint:#ffedd5; --accent-tint-2:#fed7aa;
  --glow:rgba(249,115,22,.16);
}
[data-module="chat"]{
  --accent:var(--purple-50); --accent-hover:var(--purple-60); --accent-bright:var(--purple-40);
  --accent-soft:rgba(168,85,247,.14); --accent-border:rgba(168,85,247,.45);
  --accent-tint:#f3e8ff; --accent-tint-2:#e9d5ff;   /* Brand Secondary/10 + /20 */
  --glow:rgba(168,85,247,.16);
}
/* Dashboard = Cyan (Cyan/50 core, Cyan/40 ambient glow) */
[data-module="dashboard"]{
  --accent:var(--cyan-50); --accent-hover:var(--cyan-60); --accent-bright:var(--cyan-40);
  --accent-soft:rgba(6,182,212,.14); --accent-border:rgba(6,182,212,.45);
  --accent-tint:#cffafe; --accent-tint-2:#a5f3fc;   /* Cyan/10 + /20 */
  --glow:rgba(34,211,238,.18);
}