/* Design tokens — every color/radius/shadow/type step used anywhere in the
 * app funnels through one of these custom properties instead of a repeated
 * literal.
 *
 * Light is the default (bare :root, no attribute) so the runner matches
 * Kiwami Test Cloud, the platform most users SSO in from — a light-first
 * product with a violet accent. static/js/theme.js flips [data-theme="dark"]
 * on <html> and persists the choice; a small inline snippet in
 * templates/base.html applies it before first paint so a dark-mode visitor
 * never sees a flash of light.
 *
 * The [data-theme="dark"] block below carries the Tokyo-Night-derived
 * neutrals so dark mode reads as the same UI; the one deliberate change is
 * the accent, which moves onto the same violet as light so "the accent"
 * means one hue across both themes. --color-blue stays blue: it's the
 * separate semantic for the running/queued state, not the accent.
 */

:root {
  /* ---- surfaces & ink ---- */
  --color-bg: #faf8ff;
  --color-bg-sidebar: #ffffff;
  --color-bg-raised: #ffffff;
  --color-bg-drawer: #ffffff;
  --color-bg-sunken: #f3f0fa;
  --color-bg-hover: #f4f1fb;
  --color-bg-active: #eee7fd;

  --color-border: #e6e2f0;
  --color-border-hairline: #efecf6;

  --color-text: #1b1830;
  --color-text-muted: #5b5670;
  /* Darkened from #9a94ac (~2.9:1, failed AA) so the 12px labels it lands on
     clear 4.5:1 on both --color-bg and white; still visibly the "dim" step
     below --color-text-muted. Verified by the axe-core a11y e2e sweep. */
  --color-text-dim: #6d6780;

  /* Violet-600, not the lighter violet-500: --color-accent doubles as
     link/label text (base.css `a { color: var(--color-accent) }`), and
     #7c3aed clears WCAG AA on white where #8b5cf6 doesn't. */
  --color-accent: #7c3aed;
  --color-accent-hover: #6d28d9;
  --color-accent-contrast: #ffffff;

  /* Text/icon color that sits on a fully-saturated fill (status marks, the
     gate badge's right half) — was hard-coded #fff in components.css. */
  --color-on-solid: #ffffff;

  /* Semantic hues double as pill *text* on their own tinted background
     (.pill-green etc.), so each clears 4.5:1 on its -bg pair — checked by the
     axe-core a11y e2e sweep. */
  --color-green: #0c7a45;
  --color-green-bg: #dff3e8;
  --color-red: #c32f3c;
  --color-red-bg: #fbe6e8;
  --color-red-contrast: #ffffff;
  --color-amber: #935b0c;
  --color-amber-bg: #f9edd6;
  --color-gray: #55506a;
  --color-gray-bg: #f0edf6;
  --color-blue: #285fd0;
  --color-blue-bg: #e4ecfd;

  /* Scrim behind modals / drawers / the command palette. */
  --color-overlay: rgba(24, 20, 40, 0.45);

  /* ---- elevation ---- */
  --shadow-card: 0 1px 2px 0 rgba(26, 20, 48, 0.06), 0 1px 3px 0 rgba(26, 20, 48, 0.04);
  --shadow-hover: 0 12px 28px -12px rgba(91, 60, 180, 0.28), 0 4px 10px -6px rgba(26, 20, 48, 0.12);
  /* Middle step: dropdowns, tooltips, toasts — lighter than a modal. */
  --shadow-popover: 0 6px 16px -4px rgba(26, 20, 48, 0.16), 0 2px 6px -2px rgba(26, 20, 48, 0.1);
  --shadow-overlay: 0 20px 60px rgba(41, 30, 75, 0.18);
  --shadow-modal: 0 24px 70px rgba(41, 30, 75, 0.22);

  /* ---- radius ---- */
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-pill: 999px;

  /* ---- motion ---- */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 0.12s;
  --dur-med: 0.2s;

  /* ---- type ---- */
  --font-sans: "InterVariable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono Variable", ui-monospace, "SF Mono", "Cascadia Code",
    "Roboto Mono", Menlo, Consolas, monospace;

  /* Modular scale, ~1.15. Labels floor at --text-xs (12px). */
  --text-xs: 0.75rem;     /* 12px  — chips, meta, badges */
  --text-sm: 0.8125rem;   /* 13px  — dense table / helper text */
  --text-base: 0.875rem;  /* 14px  — body default */
  --text-md: 1rem;        /* 16px  — emphasised body, inputs */
  --text-lg: 1.125rem;    /* 18px  — h3 / card titles */
  --text-xl: 1.375rem;    /* 22px  — h2 / page titles */
  --text-2xl: 1.75rem;    /* 28px  — h1 / big stats */

  --leading-tight: 1.25;
  --leading-normal: 1.55;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0b0d12;
    --color-bg-sidebar: #0e1016;
    --color-bg-raised: #12141b;
    --color-bg-drawer: #10121a;
    --color-bg-sunken: #05060a;
    --color-bg-hover: #171a22;
    --color-bg-active: #211a3a;

    --color-border: #262b36;
    --color-border-hairline: #1c202a;

    --color-text: #d7dbe3;
    --color-text-muted: #949cae;
    --color-text-dim: #838b9f;

    --color-accent: #a78bfa;
    --color-accent-hover: #b9a4fb;
    --color-accent-contrast: #0b0d12;
    --color-on-solid: #ffffff;

    --color-green: #6fd88a;
    /* Designed tints — a low-chroma wash of the state hue over the raised
       surface, matched in strength across all four states (was the
       placeholder #112233 / #332211 / #333322). */
    --color-green-bg: color-mix(in srgb, #6fd88a 15%, #12141b);
    --color-red: #f47174;
    --color-red-bg: color-mix(in srgb, #f47174 16%, #12141b);
    --color-red-contrast: #1a0303;
    --color-amber: #d8c76f;
    --color-amber-bg: color-mix(in srgb, #d8c76f 15%, #12141b);
    --color-gray: #8a93a6;
    --color-gray-bg: color-mix(in srgb, #8a93a6 15%, #12141b);
    --color-blue: #7aa2f7;
    --color-blue-bg: color-mix(in srgb, #7aa2f7 16%, #12141b);

    --color-overlay: rgba(0, 0, 0, 0.6);

    --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    --shadow-hover: 0 12px 28px -10px rgba(0, 0, 0, 0.6);
    --shadow-popover: 0 6px 16px -4px rgba(0, 0, 0, 0.5);
    --shadow-overlay: 0 20px 60px rgba(0, 0, 0, 0.5);
    --shadow-modal: 0 24px 70px rgba(0, 0, 0, 0.55);
  }
}

:root[data-theme="dark"] {
  --color-bg: #0b0d12;
  --color-bg-sidebar: #0e1016;
  --color-bg-raised: #12141b;
  --color-bg-drawer: #10121a;
  --color-bg-sunken: #05060a;
  --color-bg-hover: #171a22;
  --color-bg-active: #211a3a;

  --color-border: #262b36;
  --color-border-hairline: #1c202a;

  --color-text: #d7dbe3;
  --color-text-muted: #949cae;
  --color-text-dim: #838b9f;

  --color-accent: #a78bfa;
  --color-accent-hover: #b9a4fb;
  --color-accent-contrast: #0b0d12;
  --color-on-solid: #ffffff;

  --color-green: #6fd88a;
  --color-green-bg: color-mix(in srgb, #6fd88a 15%, #12141b);
  --color-red: #f47174;
  --color-red-bg: color-mix(in srgb, #f47174 16%, #12141b);
  --color-red-contrast: #1a0303;
  --color-amber: #d8c76f;
  --color-amber-bg: color-mix(in srgb, #d8c76f 15%, #12141b);
  --color-gray: #8a93a6;
  --color-gray-bg: color-mix(in srgb, #8a93a6 15%, #12141b);
  --color-blue: #7aa2f7;
  --color-blue-bg: color-mix(in srgb, #7aa2f7 16%, #12141b);

  --color-overlay: rgba(0, 0, 0, 0.6);

  --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
  --shadow-hover: 0 12px 28px -10px rgba(0, 0, 0, 0.6);
  --shadow-popover: 0 6px 16px -4px rgba(0, 0, 0, 0.5);
  --shadow-overlay: 0 20px 60px rgba(0, 0, 0, 0.5);
  --shadow-modal: 0 24px 70px rgba(0, 0, 0, 0.55);
}