/* ==========================================================================
   KCC Canonical Theme — the single source of the KCC "brand smell"
   ==========================================================================

   This file is the executable counterpart to `conventions/style-guide.md`.
   Every KCC application imports it unmodified so that all apps derived from
   the kit share one identical token layer, reset, and base chrome. Do NOT
   hand-edit token values here to restyle a single app — if a value is wrong
   for every KCC app, change it in the kit (and in style-guide.md in the same
   change). If a value is wrong for only THIS app, that is a deliberate
   project-level divergence: record it in the project's conventions and
   override the token in your own stylesheet, not here.

   Token values are kept byte-for-byte in sync with the tables in
   `conventions/style-guide.md`. The style guide is the human-readable
   specification; this file is what actually ships.

   Structure:
     1. Mode-agnostic tokens (:root)   — radius, elevation, z-index, semantic,
                                          environment, categorical
     2. Dark theme tokens              — [data-theme="dark"]  (default)
     3. Light theme tokens             — [data-theme="light"]
     4. Reset + base document chrome   — box model, typography, scrollbars,
                                          focus ring, reduced motion
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Mode-agnostic tokens
   These are identical in both themes. Do not create dark/light variants.
   --------------------------------------------------------------------------- */
:root {
  /* Border radius scale */
  --r-sm: 3px;   /* badges, small chips, inline tags */
  --r-md: 6px;   /* buttons, inputs, selects, textareas, cards */
  --r-lg: 8px;   /* panels, modals, popovers, dropdown menus */
  --r-xl: 12px;  /* large containers, hero cards, dialog windows */
  /* pills use the literal value border-radius: 20px — not a token */

  /* Elevation — depth via shadow + border, never gradients */
  --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.35); /* toasts, tooltips, small floats */
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.30); /* modals, popovers, palettes */
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.25); /* dropdowns, large overlays */

  /* Z-index scale — wide gaps so intermediate values are never needed */
  --z-sidebar: 100;         /* the persistent app rail */
  --z-dropdown: 200;        /* dropdown menus, select popups, autocomplete */
  --z-overlay: 500;         /* popovers, tooltips, floating panels */
  --z-modal-backdrop: 900;  /* the dimmed backdrop behind a modal */
  --z-modal: 1000;          /* modal and dialog content */
  --z-toast: 9000;          /* toast notifications — always on top */

  /* Foreground on a filled accent/semantic surface — always white, both
     themes (style-guide.md: primary/destructive button text). */
  --on-accent: #fff;

  /* Semantic — Success */
  --success: #22c55e;
  --success-bg: rgba(34, 197, 94, 0.15);

  /* Semantic — Warning */
  --warning: #f59e0b;
  --warning-bg: rgba(245, 158, 11, 0.15);

  /* Semantic — Error */
  --error: #d85a30;
  --error-bg: rgba(216, 90, 48, 0.15);
  --error-text: #e5709b; /* inline error text — reads on violet-tinted surfaces */

  /* Semantic — Info */
  --info: #3b82f6;
  --info-bg: rgba(59, 130, 246, 0.15);

  /* Environment badge colors — dev/stage/prod indicators only */
  --env-dev: #3b82f6;
  --env-stage: #f59e0b;
  --env-prod: #22c55e;

  /* Categorical palette (7 contrast-safe colors) — charts, tags, categories.
     --cat-1 tracks the brand accent family. Assign in order; cycle after 7. */
  --cat-1: #6f9bff;
  --cat-2: #1d9e75;
  --cat-3: #d85a30;
  --cat-4: #378add;
  --cat-5: #d4537e;
  --cat-6: #ba7517;
  --cat-7: #888780;

  /* Persistent navigation rail — always dark, in BOTH themes.
     The app shell re-scopes its neutral tokens to these values so the rail
     reads identically light or dark (style-guide.md: Application Shell). */
  --rail-bg: #191821;
  --rail-surface-alt: #262433;
  --rail-border: #2b2a38;
  --rail-border-strong: #403e52;
  --rail-text: #f2f1f7;
  --rail-text-secondary: #b6b3c6;
  --rail-text-muted: #8f8ca4;
  --rail-accent: #6f9bff;
  --rail-accent-bg: rgba(111, 155, 255, 0.18);
  --rail-accent-bg-soft: rgba(111, 155, 255, 0.12);
}

/* ---------------------------------------------------------------------------
   2. Dark theme (default)
   Violet-tinted warm neutrals with a single blue accent (KochID "pilot-dark").
   --accent is theme-scoped because it is tuned per mode.
   --------------------------------------------------------------------------- */
[data-theme="dark"] {
  /* Neutral surfaces */
  --bg: #17161d;
  --surface: #221f2c;
  --surface-alt: #272533;
  --surface-input: #1c1b24;

  /* Borders (solid, tuned per theme) */
  --border: #2c2a3a;
  --border-strong: #403d52;
  --border-subtle: #262433;

  /* Text */
  --text: #f1f0f7;
  --text-secondary: #b6b3c6;
  --text-muted: #8b889f;

  /* UI chrome */
  --label: #8b889f;
  --button-fg: #b6b3c6;

  /* Alignment grid — intentionally near-invisible */
  --grid: rgba(255, 255, 255, 0.04);

  /* Accent (blue) */
  --accent: #6f9bff;
  --accent-hover: #8fb3ff;
  --accent-bg: rgba(111, 155, 255, 0.18);
  --accent-bg-soft: rgba(111, 155, 255, 0.1);
}

/* ---------------------------------------------------------------------------
   3. Light theme
   Warm off-white neutrals with a deeper blue accent (KochID "pilot").
   --------------------------------------------------------------------------- */
[data-theme="light"] {
  /* Neutral surfaces */
  --bg: #f5f4f8;
  --surface: #fff;
  --surface-alt: #f1eff8;
  --surface-input: #fff;

  /* Borders */
  --border: #e9e8ef;
  --border-strong: #d5d3e0;
  --border-subtle: #eeedf3;

  /* Text */
  --text: #25242c;
  --text-secondary: #5d5b6a;
  --text-muted: #726f82;

  /* UI chrome */
  --label: #726f82;
  --button-fg: #5d5b6a;

  /* Alignment grid */
  --grid: rgba(0, 0, 0, 0.05);

  /* Accent (blue) */
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-bg: rgba(37, 99, 235, 0.12);
  --accent-bg-soft: rgba(37, 99, 235, 0.07);
}

/* ---------------------------------------------------------------------------
   4. Reset + base document chrome
   --------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body,
#root {
  height: 100%;
}

body {
  /* System-installed Helvetica Neue → platform fallback. No web fonts. */
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;   /* Body role — 13px/400 */
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.006em; /* signature KCC tracking, inherited everywhere */
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Monospace stack — code blocks, inline code, terminal output, slugs */
code,
pre,
kbd,
samp {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
}

/* Scrollbars — thin, neutral, unobtrusive */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  background-clip: padding-box;
  border: 2px solid transparent;
  border-radius: 6px;
}

/* Focus ring — single accent outline on keyboard focus only */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Links inherit the accent */
a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Reduced motion — collapse all non-essential motion.
   Defined once here; do not duplicate per component. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}