/**
 * Kimss Design Tokens — Aurora skin (premium dark baseline).
 * Inspired by the backoffice Digital Workers console: cool navy canvas,
 * glass chrome, glow-ring elevation, indigo + electric-blue dual accent.
 *
 * Consumed by: SPA shell (kh aliases), report theme bridge, kimss-ui.css,
 * kimss-motion.css, Tailwind theme-extend, and marketing/legal pages.
 *
 * Revert: copy kimss-tokens-classic.css over this file.
 * Do not hardcode hex colors in product UI; reference these tokens instead.
 */
:root {
  color-scheme: dark;

  /* ── Backgrounds / surfaces (cool navy canvas) ──────────── */
  --bg-primary: #0b1220;
  --bg-secondary: #111a2e;
  --surface-card: #152238;
  --surface-raised: #1a2744;
  --surface-elevated: #243356;
  --surface-overlay: rgba(11, 18, 32, 0.78);
  --surface-overlay-strong: rgba(11, 18, 32, 0.94);

  /* Atmosphere (radial glow recipe for pages/shell) */
  --atmosphere-glow-1: rgba(26, 39, 68, 0.85);
  --atmosphere-glow-2: rgba(18, 38, 63, 0.7);
  --atmosphere-bg:
    radial-gradient(1200px 600px at 12% -10%, var(--atmosphere-glow-1), transparent 55%),
    radial-gradient(900px 500px at 88% 0%, var(--atmosphere-glow-2), transparent 50%),
    var(--bg-primary);

  /* ── Accent / brand (indigo primary + electric blue secondary) */
  --accent-primary: #6366f1;
  --accent-hover: #818cf8;
  --accent-active: #4f46e5;
  --accent-fill: #4f46e5;
  --accent-fill-hover: #4338ca;
  --accent-soft: rgba(99, 102, 241, 0.14);
  --accent-soft-strong: rgba(99, 102, 241, 0.22);
  --accent-mid: rgba(99, 102, 241, 0.36);
  --accent-ring: rgba(99, 102, 241, 0.28);
  --accent-purple: #8b5cf6;
  --accent-purple-hover: #a78bfa;
  --accent-blue: #3b82f6;
  --accent-blue-hover: #60a5fa;
  --accent-blue-soft: rgba(59, 130, 246, 0.16);
  --accent-ice: #bfdbfe;
  --on-accent: #ffffff;
  --text-on-accent: #ffffff;
  /* Selected chrome text (header, tabs) — never use --accent-primary as 13px text */
  --text-selected: var(--accent-ice);
  /* Links / accent-as-text on navy (AA). Indigo #6366f1 stays for fills/rings only. */
  --accent-text: #93c5fd;

  --gradient-accent: linear-gradient(135deg, #6366f1 0%, #3b82f6 100%);
  --gradient-accent-soft: linear-gradient(135deg, rgba(99, 102, 241, 0.22), rgba(59, 130, 246, 0.14));
  --gradient-hairline: linear-gradient(90deg, rgba(99, 102, 241, 0.55), rgba(59, 130, 246, 0.35), transparent 85%);

  /* ── Text (AA ≥ 4.5:1 on --surface-card and --surface-raised) ─
   * Pair budget (approx vs #152238 card / #1a2744 raised):
   *   --text-primary     #e8eef8  ~12:1 / ~11:1   body
   *   --text-secondary   #93a4bf   ~7.0 / ~6.5    unselected tabs, labels
   *   --text-muted       #8a9bb8   ~5.3 / ~4.9    helper copy (not 11px caps)
   *   --text-placeholder #8a9bb8   ~5.3 / ~4.9    input placeholder
   *   --text-disabled    #8a9bb8   ~5.3 / ~4.9    disabled (no extra opacity)
   *   --text-section-label #93a4bf ~7.0 / ~6.5    11px table headers
   *   --text-selected    #bfdbfe  ~13:1           selected tabs / nav
   *   --accent-text      #93c5fd   ~8:1            links / accent-as-text
   *   --text-on-accent   #ffffff  ~6.3:1 on --accent-fill
   * Non-text (1.4.11 ≥ 3:1 vs adjacent surface):
   *   --control-track-off #7182a0  ~3.5:1 vs card
   *   --control-track-on  #6366f1  ~3.7:1 vs card
   *   --control-thumb     #ffffff  ≥3:1 vs either track
   *   --border-control    #7182a0  input/checkbox/radio outline
   */
  --text-primary: #e8eef8;
  --text-secondary: #93a4bf;
  --text-muted: #8a9bb8;
  --text-placeholder: #8a9bb8;
  --text-disabled: #8a9bb8;
  --text-nav-inactive: #93a4bf;
  --text-nav-hover: #d6deee;
  --text-section-label: #93a4bf;
  --text-on-brand: #ffffff;
  --text-brand-muted: #c7d2fe;

  /* ── Controls (WCAG 1.4.11 non-text contrast) ───────────── */
  --control-track-off: #7182a0;
  --control-track-on: var(--accent-primary);
  --control-thumb: #ffffff;
  --border-control: #7182a0;

  /* ── Borders ────────────────────────────────────────────── */
  --border-subtle: rgba(148, 163, 184, 0.16);
  --border-strong: rgba(148, 163, 184, 0.28);
  --border-focus: #6366f1;
  --border-divider: rgba(148, 163, 184, 0.12);
  --border-accent-soft: rgba(99, 102, 241, 0.32);

  /* ── Status ─────────────────────────────────────────────── */
  --status-success: #22c55e;
  --status-success-fg: #86efac;
  --status-success-soft: rgba(34, 197, 94, 0.14);
  --status-success-border: rgba(34, 197, 94, 0.34);
  --status-warning: #fbbf24;
  --status-warning-soft: rgba(251, 191, 36, 0.16);
  --status-warning-fg: #fde68a;
  --status-danger: #ef4444;
  --status-danger-hover: #f87171;
  --status-danger-text: #fca5a5;
  --status-danger-text-strong: #fecaca;
  --status-danger-soft: rgba(239, 68, 68, 0.14);
  --status-danger-soft-strong: rgba(239, 68, 68, 0.24);
  --status-danger-border: rgba(248, 113, 113, 0.34);
  --status-danger-border-strong: rgba(248, 113, 113, 0.55);
  --status-info: #60a5fa;
  --status-info-soft: rgba(96, 165, 250, 0.14);

  /* ── Spacing (4px scale) ────────────────────────────────── */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Radius ─────────────────────────────────────────────── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ── Typography (Aurora: DM Sans + Space Grotesk display) ─ */
  --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Space Grotesk", "DM Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "DM Mono", "IBM Plex Mono", ui-monospace, "Cascadia Code", monospace;
  /* Legacy report aliases — keep Sora/Manrope fallbacks from resolving */
  --report-font-head: var(--font-display);
  --report-font-body: var(--font-sans);
  --report-font-mono: var(--font-mono);
  --font-head: var(--font-display);
  --ff-sans: var(--font-sans);
  --ff-display: var(--font-display);
  --text-xs: 0.6875rem;   /* 11px — table headers / badges */
  --text-sm: 0.8125rem;   /* 13px — body / table rows */
  --text-base: 0.875rem;  /* 14px — primary body */
  --text-lg: 1rem;        /* 16px — section emphasis */
  --text-xl: 1.125rem;    /* 18px — section headers */
  --text-2xl: 1.375rem;   /* 22px — page titles */
  --text-3xl: 1.625rem;   /* 26px — large page titles */
  --text-display: 1.85rem; /* 29.6px — display hero */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --tracking-tight: -0.02em;
  --tracking-display: -0.025em;
  --tracking-label: 0.06em;

  /* ── Elevation (border + glow rings over heavy shadows) ─── */
  --shadow-sm: 0 0 0 1px var(--border-subtle);
  --shadow-md: 0 0 0 1px var(--border-subtle), 0 8px 24px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 0 0 1px var(--border-strong), 0 16px 40px rgba(0, 0, 0, 0.35);
  --shadow-accent: 0 0 0 1px var(--border-accent-soft), 0 8px 28px rgba(99, 102, 241, 0.22);
  --glow-ring: 0 0 0 2px rgba(59, 130, 246, 0.35);
  --glow-ring-strong: 0 0 0 2px rgba(99, 102, 241, 0.5);

  /* ── Glass chrome ───────────────────────────────────────── */
  --glass-bg: rgba(11, 18, 32, 0.88);
  --glass-bg-strong: rgba(11, 18, 32, 0.94);
  --glass-blur: 12px;
  --glass-border: rgba(148, 163, 184, 0.14);

  /* ── Motion ─────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-quick: 140ms;
  --duration-base: 240ms;
  --duration-slow: 360ms;
  --transition-fast: 140ms var(--ease-spring);
  --transition-base: 240ms var(--ease-spring);

  /* ── Focus ──────────────────────────────────────────────── */
  --focus-ring: 0 0 0 2px rgba(99, 102, 241, 0.4);
  --focus-ring-offset: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--accent-primary);

  /* ── Layout chrome (shell) ──────────────────────────────── */
  --header-h: 64px;
  --outer-padding: 16px;

  /* ── Scrollbar (deep purple / indigo, matches dark canvas) ─ */
  --scrollbar-thumb: #2a2046;
  --scrollbar-thumb-strong: #49337d;
  --scrollbar-track: #090a16;
}

/* ==========================================================================
   GLOBAL CUSTOM SCROLLBAR (Deep Purple / Indigo Theme)
   ========================================================================== */

/* Webkit Browsers (Chrome, Safari, Edge, Opera) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track); /* Deep dark page canvas */
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb); /* Muted deep indigo */
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-strong); /* Highlighted purple on hover */
}

/* Firefox / Modern Standards */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* Global interactive state conventions (product UI) */
:where(button, a, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

:where(button, input, select, textarea, .k-btn, .k-switch):disabled,
:where(button, input, select, textarea, .k-btn, .k-switch)[aria-disabled="true"] {
  cursor: not-allowed;
  color: var(--text-disabled);
}

/* Product pages inherit Aurora typeface from tokens */
html.kimss-report-root,
html.kimss-report-root body,
body.kimss-report-root {
  font-family: var(--font-sans);
  background: var(--atmosphere-bg);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}