/* ============================================================
   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 */
  /* Blue. NOT in the Figma kit's ramps, read off the Data source → Analytics
     frames (8263:45465), which use it for "process" readings: a question that
     was asked again, and how much of each table an answer leans on. Cyan is
     spoken for (it is the Build Dashboard module accent), so reusing it here
     would say "dashboard" on a page that is not one. Kept as a ramp rather
     than a one-off hex so the two themes can pick their own step. */
  --blue-40:#8fb3f5;   --blue-50:#6d97e8;   --blue-60:#3b6fd4;
  --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);
  --border-input:var(--zinc-30);   /* Figma Border/Primary/default, the high-contrast form stroke (auth inputs + outline buttons) */

  --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);
  /* neither good nor bad, a reading about process. Analytics uses it for
     "asked again" and for how much of an answer each table carries. */
  --info:var(--blue-40);       --info-soft:rgba(143,179,245,.15);

  /* Key colours, the PK/FK marker in Data source → Schema. Ameer's call: the two
     kinds of key are told apart by the COLOUR OF THE TEXT, not by the chip behind
     it, which stays the same neutral for both. Orange is the brand step (a primary
     key is the identity of the row, so it takes the emphasis colour); Cyan is the
     palette's own cool step, used here because the kit has no blue ramp and this
     is not the place to introduce one. The 40 steps are chosen for legibility on
     a dark chip; light theme drops to the 60 steps below for the same reason. */
  --key-pk:var(--orange-40);
  --key-fk:var(--cyan-40);

  --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);
  --border-input:var(--zinc-50);   /* mirrored step of the dark Zinc/30 form stroke */

  --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);
  --info:var(--blue-60);       --info-soft:rgba(59,111,212,.12);

  --key-pk:var(--orange-60);   /* the 40 steps wash out on a light chip */
  --key-fk:var(--cyan-60);

  --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) */
/* --drawer-glow is --glow's quiet sibling, for the ambient top-glow on the
   right-side drawer. It cannot reuse --glow: that value is tuned to paint over a
   photographic ambient background inside a ~1400px container, and on the drawer's
   flat opaque --menu-bg at half that width it measured +19 RGB points at the top
   edge, a visible orange wash across the header, not an ambience. These are set
   so the drawer's peak lands ~8 points over its own surface: present enough to
   lift the panel, too shallow to find an edge on. */
[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);
  --drawer-glow:rgba(249,115,22,.045);
}
[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);
  --drawer-glow:rgba(168,85,247,.05);   /* purple reads dimmer than orange at equal alpha */
}
/* 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);
  --drawer-glow:rgba(34,211,238,.05);
}
/* LIGHT THEME, DASHBOARD ONLY: the same glow, 20% quieter (Ameer, 3 Sep).
   The deep sea read too strong in light mode, in two places at once: the page's
   own ambient at the top of the screen, and this, the ambient top-glow that
   .workbox / .dlib-shell / .dv-board / .history all carry, which is what he
   meant by "that colour is actually coming to the container as well". The
   page's half is toned in css/bg-trace.css; this is the containers' half.

   TWO PASSES, AND THIS IS THE SECOND. 20% off first (.18 -> .144), then 30%
   off what was left (Ameer, same day: "make it thirty more percentage,
   whatever we have right now... not only from the main background, from this
   main box also"). .144 x 0.7 = .101, which is 44% below where it started.
   The box is the half he named specifically: .workbox / .dlib-shell /
   .dv-board / .history are opaque, so the page underneath does not show
   through them and this glow is the ONLY cyan on them. Move it or the
   container stays exactly as blue as it was however far the page is toned.

   DARK IS UNTOUCHED: on a dark ground the same glow reads as a lift rather
   than a wash, and it was never the complaint. Higher specificity than the
   [data-module] rule above, so it wins wherever it applies without that rule
   having to know about it. */
html[data-theme="light"][data-module="dashboard"]{
  --glow:rgba(34,211,238,.101);
}