/* MINOSS-AI GUARD console — design tokens.
 *
 * The palette is the one the console has shipped with: dark navy with a single
 * accent, colour otherwise reserved for what a finding means. What this file
 * adds is the rest of a system -- a spacing scale, a type scale, radii and
 * motion -- so that every screen is built from the same few numbers instead of
 * each one choosing its own.
 *
 * Self-contained: no CDN assets. The console runs on customer networks that
 * may have no outbound access, so its typeface ships inside it, SIL OFL 1.1
 * with the licence served beside it. Before, the stack named Pretendard and
 * no PC had it: every Korean screen fell back to Malgun Gothic on Windows.
 * "Pretendard Variable" is declared in fonts/pretendardvariable-dynamic-subset.css,
 * which the pages load before this file: 92 pieces, each fetched only when
 * a screen draws one of its characters.
 */

[hidden] { display: none !important; }

:root {
  color-scheme: dark;

  /* Surfaces, from the page down to what floats above it. */
  --bg: #080c14;
  --chrome: #0b1018;
  --surface: #101620;
  --surface-2: #151d29;
  --surface-sunken: #0d1219;
  --surface-hover: #182230;
  --overlay: rgba(4, 7, 12, 0.62);

  --line: #1e2733;
  --line-strong: #2d3849;

  --text: #e6ebf2;
  --text-2: #a3aec0;
  /* --text-3 must clear WCAG AA (4.5:1) against the surface at 12 px.
     Dark: #8390a6 on #0e1526 → 5.11:1 (was #6f7b91 → 3.7:1, failed AA).
     Light: #5a6480 on #f8fafc → 5.74:1 (was #6b7590 → 4.45:1, borderline).
     Redefined per theme; the light override is in the .light block below. */
  --text-3: #8390a6;

  /* One accent. */
  --accent: #7467f0;
  --accent-hover: #8a7ef5;
  --accent-soft: rgba(116, 103, 240, 0.14);
  --accent-ink: #ffffff;

  /* Meaning, never decoration. */
  --ok: #39d98a;
  --ok-soft: rgba(57, 217, 138, 0.13);
  --info: #4ca7ff;
  --info-soft: rgba(76, 167, 255, 0.13);
  --warn: #ffb547;
  --warn-soft: rgba(255, 181, 71, 0.13);
  --high: #ff7a45;
  --high-soft: rgba(255, 122, 69, 0.13);
  --danger: #ff4d67;
  --danger-soft: rgba(255, 77, 103, 0.14);
  --muted-soft: rgba(147, 160, 180, 0.12);

  /* Horizontal-field label column width. Used by .field.inline in
     components.css. 180 px is the widest common label in Korean;
     English-heavy deployments can override on :root[data-lang=en] to
     something shorter without touching the layout code. */
  --label-min: 180px;

  /* Icon size scale — a small set of tokens the JS layer can pass to
     icon() so a "small" icon means the same thing everywhere. Value is
     px (unitless because icon() expects a number). */
  --icon-xs: 12;
  --icon-sm: 14;
  --icon-md: 16;
  --icon-lg: 20;

  /* Categorical palette — used by charts for series that carry no
     inherent meaning (rank breakdowns, mix bars, sparklines). Meaningful
     colours (--ok, --danger, --accent) come from the semantic scale
     above; --cat-* keep the two spaces separate so a "block" bar stays
     red and a nth-service pie slice doesn't accidentally read as
     an error. */
  --cat-1: var(--accent);
  --cat-2: var(--info);
  --cat-3: #2ec4b6;
  --cat-4: #c77dff;
  --cat-5: #f4a261;
  --cat-6: #8d99ae;
  --cat-7: #e76f51;
  --cat-8: #90be6d;

  /* Space: a 4px grid. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;

  /* Type: five sizes carry the whole console. */
  --t-xs: 12px;
  --t-sm: 13px;
  --t-md: 14px;
  --t-lg: 16px;
  --t-xl: 24px;
  --t-kpi: 30px;

  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 24px 64px rgba(0, 0, 0, 0.6);
  /* A card's edge: in the dark a faint top highlight gives a surface its
     depth; in the light a soft shadow does. */
  --card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  /* The page behind the cards: a faint wash of the accent at the top. */
  --bg-wash: radial-gradient(1200px 420px at 30% -160px, rgba(116, 103, 240, 0.09), transparent 70%);
  /* The title bar, frosted over what scrolls beneath it: --chrome, see-through. */
  --chrome-glass: rgba(11, 16, 24, 0.86);

  --dur-fast: 90ms;
  --dur: 160ms;
  --dur-slow: 260ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --sidebar-w: 224px;
  --sidebar-w-collapsed: 64px;
  --topbar-h: 56px;
  --drawer-w: 560px;

  --font: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont,
          "Apple SD Gothic Neo", "Segoe UI", "Malgun Gothic", Roboto, sans-serif;
  --font-mono: "Cascadia Mono", "D2Coding", Consolas, monospace;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f6fa;
  --chrome: #ffffff;
  --surface: #ffffff;
  --surface-2: #ffffff;
  --surface-sunken: #eef1f6;
  --surface-hover: #f3f5fa;
  --overlay: rgba(16, 23, 37, 0.32);
  --line: #e3e7ef;
  --line-strong: #c9d1de;
  --text: #101725;
  --text-2: #4d586c;
  /* Light-theme override — see the dark-mode block's comment on --text-3. */
  --text-3: #5a6480;
  /* Light-theme accent-hover: the dark-mode value was too pale on white
     (weakened focus/hover states on white surfaces). Darker toward the ink. */
  --accent-hover: #4c3fe0;
  --accent-soft: rgba(116, 103, 240, 0.1);
  --ok: #1a7f4b;
  --ok-soft: rgba(26, 127, 75, 0.1);
  --info: #2563eb;
  --info-soft: rgba(37, 99, 235, 0.09);
  --warn: #b57200;
  --warn-soft: rgba(181, 114, 0, 0.11);
  --high: #d65d29;
  --high-soft: rgba(214, 93, 41, 0.11);
  --danger: #d33a3a;
  --danger-soft: rgba(211, 58, 58, 0.09);
  --muted-soft: rgba(90, 101, 121, 0.1);

  /* Light-theme categorical palette. Slightly darker versions of the
     dark palette so mid-brightness colours (--cat-6 slate) still read
     against white surfaces. */
  --cat-3: #1a9484;
  --cat-4: #9b51e0;
  --cat-5: #d97706;
  --cat-6: #64748b;
  --cat-7: #c2410c;
  --cat-8: #4d7c0f;
  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-2: 0 8px 24px rgba(16, 24, 40, 0.1);
  --shadow-3: 0 24px 64px rgba(16, 24, 40, 0.18);
  --card-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.04);
  --bg-wash: radial-gradient(1200px 420px at 30% -160px, rgba(116, 103, 240, 0.07), transparent 70%);
  --chrome-glass: rgba(255, 255, 255, 0.86);
}

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