/* ==========================================================================
   Ops Console UI Kit — the design system.

   This file is the whole reason the kit exists: every component in the kit
   reads these tokens and nothing else, so any two of them dropped side by side
   in a real product agree about surface, ink, radius, spacing and motion.

   Rules for anyone extending the kit:
   - A component never hardcodes a colour, radius, duration or ease. If it
     needs a new one, it goes here with a name that says its ROLE, not its
     value (`--surface-raised`, never `--grey-800`).
   - Theme is one attribute on the root: [data-theme="dark"|"light"]. Only the
     values below change between themes; no component has a theme branch.
   - GSAP owns transforms. Nothing here sets `transform` on an animated node.
   ========================================================================== */

:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* --- surfaces, back to front ---
     The chrome (sidebar, top bar) sits DARKER than the canvas it frames, so
     the cards read as the lit surface and the frame recedes. */
  --surface-sunken: #06070a;
  --surface: #0b0d11;
  --surface-raised: #101319;
  --surface-overlay: #161a22;
  --surface-hover: #1b212b;

  /* --- ink --- */
  --ink: #eaeef6;
  --ink-muted: #99a3b5;
  --ink-faint: #7b8497;
  --ink-inverse: #06070a;

  /* --- lines. `--edge` is the top highlight that lights a raised surface
         from above; it is what stops a card reading as a flat rectangle. --- */
  --line: #1b2029;
  --line-strong: #272f3c;
  --edge: rgba(255, 255, 255, 0.055);
  --edge-strong: rgba(255, 255, 255, 0.09);

  /* --- accent and signal ---
     Two roles, not one. `--accent` is the interactive colour and must stay
     legible as TEXT in both themes. `--signal` is the block colour, always the
     same bright chartreuse, always with dark ink on it: it marks what is live
     and what you can press, and nothing decorative is allowed to wear it. */
  --accent: #d4ff3f;
  --accent-hover: #e2ff77;
  --accent-ink: #0a0c10;
  --accent-wash: rgba(212, 255, 63, 0.12);
  --signal: #d4ff3f;
  --signal-ink: #0a0c10;
  --signal-glow: rgba(212, 255, 63, 0.22);

  --ok: #35d39a;
  --warn: #f5b23c;
  --danger: #fb6f7f;
  --info: #4cc3f0;
  --ok-wash: rgba(53, 211, 154, 0.14);
  --warn-wash: rgba(245, 178, 60, 0.14);
  --danger-wash: rgba(251, 111, 127, 0.14);
  --info-wash: rgba(76, 195, 240, 0.14);

  /* --- data series: ordered, and distinguishable in both themes. Deliberately
         cool, so a reading never competes with the signal colour. --- */
  --series-1: #7c8cff;
  --series-2: #4cc3f0;
  --series-3: #35d39a;
  --series-4: #f5b23c;
  --series-5: #fb6f7f;
  --series-6: #b78cf5;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-3: 0 24px 56px rgba(0, 0, 0, 0.6);
  --scrim: rgba(4, 5, 8, 0.68);
}

[data-theme="light"] {
  color-scheme: light;

  --surface-sunken: #eceef2;
  --surface: #f7f8fa;
  --surface-raised: #ffffff;
  --surface-overlay: #ffffff;
  --surface-hover: #eef0f5;

  --ink: #0d1015;
  --ink-muted: #5b6472;
  --ink-faint: #6b7482;
  --ink-inverse: #ffffff;

  --line: #e2e6ed;
  --line-strong: #ccd3df;
  --edge: rgba(255, 255, 255, 0.9);
  --edge-strong: rgba(255, 255, 255, 1);

  /* Same role, different value. A neon block that reads as a signal against a
     near-black ground is close to unreadable on white: the eye gets no edge and
     dark ink on it has nowhere to sit. In the light theme the signal keeps its
     hue and drops its luminance, so the button, the pulse and the active nav
     bar stay the same idea and stay legible. */
  --accent: #4f6b00;
  --accent-hover: #3d5300;
  --accent-ink: #ffffff;
  --accent-wash: rgba(79, 107, 0, 0.10);
  --signal: #4f6b00;
  --signal-ink: #ffffff;
  --signal-glow: rgba(79, 107, 0, 0.26);

  --ok: #0f9d63;
  --warn: #b7791f;
  --danger: #d13d51;
  --info: #1785b3;
  --ok-wash: rgba(15, 157, 99, 0.10);
  --warn-wash: rgba(183, 121, 31, 0.10);
  --danger-wash: rgba(209, 61, 81, 0.10);
  --info-wash: rgba(23, 133, 179, 0.10);

  --series-1: #4351d8;
  --series-2: #1785b3;
  --series-3: #0f9d63;
  --series-4: #b7791f;
  --series-5: #d13d51;
  --series-6: #7c4fc4;

  --shadow-1: 0 1px 2px rgba(15, 19, 25, 0.06);
  --shadow-2: 0 8px 24px rgba(15, 19, 25, 0.09);
  --shadow-3: 0 24px 56px rgba(15, 19, 25, 0.13);
  --scrim: rgba(15, 19, 25, 0.38);
}

/* --- everything below is theme-independent: one scale, used everywhere --- */
:root {
  /* Three roles, three faces. The display face is spent on the brand and page
     titles only; the UI face is narrower and quieter, which is what makes it
     readable at 13px; every number and micro-label is mono, with tabular
     figures, so columns of data line up and never jitter as they animate. */
  --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-ui: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --tracking-label: 0.14em;

  /* type scale */
  --text-xs: 0.6875rem;
  --text-sm: 0.78125rem;
  --text-base: 0.875rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.875rem;
  --text-3xl: 2.5rem;

  /* spacing: a 4px base, so components snap to the same rhythm */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  --radius-sm: 6px;
  --radius: 9px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* motion: components reference these, never a literal duration or ease,
     so the whole kit can be re-timed from one place */
  --dur-fast: 0.16s;
  --dur: 0.28s;
  --dur-slow: 0.46s;
  --ease-out: power3.out;      /* read by JS via getComputedStyle */
  --ease-inout: power2.inOut;
  --ease-spring: elastic.out(1, 0.72);
  --ease-back: back.out(1.7);

  --control-h: 34px;
  --control-h-sm: 26px;
  --tap-min: 44px;
  --sidebar-w: 232px;
  --sidebar-w-collapsed: 64px;
  --topbar-h: 56px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01s;
    --dur: 0.01s;
    --dur-slow: 0.01s;
  }
}