/* Design tokens for the mcp.wrongtrain dashboard. Dark editorial theme only.
   Single source of truth: components read these custom properties and never
   hardcode a color, size, or spacing value. House style: no em or en dashes
   anywhere in this tree. */
:root {
  /* surfaces and ink */
  color-scheme: dark;
  --bg: #0F1216;
  --surface: #151A21;
  --raised: #1B222B;
  --hairline: #232B35;
  --ink: #E8EBEE;
  --ink-2: #9AA5B1;
  --ink-3: #7C8794;   /* muted captions; place on --bg or --surface only, never on --raised */
  --link: #82B4E8;
  --accent: #5590CE;  /* focus rings, active indicators, knob tracks, primary buttons: marks and borders, not body text */

  /* categorical chart palette: fixed slots, stable identity, never cycled.
     slot 1 = File reads, slot 2 = Search, slot 3 = Aggregations,
     slot 4 = Receipts and storage. This exact hex set carries the palette
     validation record; do not substitute without re-running the validator. */
  --chart-1: #5590CE;
  --chart-2: #B08B3A;
  --chart-3: #219E85;
  --chart-4: #B0522E;
  --chart-other: var(--ink-3);

  /* sequential ramp, light to dark, single hue */
  --ramp-1: #A8C6E8;
  --ramp-2: #7FA6CE;
  --ramp-3: #5B8DC4;
  --ramp-4: #3E6EA3;
  --ramp-5: #2A4E78;

  /* status colors: state only, never used as series; always icon plus label */
  --status-good: #37996F;
  --status-attention: #B78D3E;
  --status-critical: #B04455;

  /* type */
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-20: 20px;
  --fs-28: 28px;
  --fs-40: 40px;
  --fs-hero: 48px;

  /* space and shape: 8px base unit */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-6: 48px;
  --pad-card: 20px;
  --gap-section: 48px;
  --r-card: 6px;
  --r-chip: 4px;
  --content-max: 1240px;
  --gutter: 24px;

  /* motion: 150ms ease fades only; nothing moves */
  --fade: 150ms ease;

  /* the only permitted shadow */
  --shadow: 0 1px 2px rgb(0 0 0 / 0.3);
}

/* --- Light theme -----------------------------------------------------------
   Semantic-token overrides ONLY; no component styles are duplicated. The system
   preference applies unless the user explicitly chose dark; an explicit
   data-theme (set from a non-sensitive 'theme' cookie and server-rendered, so
   there is no flash of the wrong theme) always wins. Dark stays the product
   default. --chart-other stays var(--ink-3), so it re-resolves automatically. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #FBFCFD; --surface: #FFFFFF; --raised: #F1F4F8; --hairline: #DDE2E9;
    --ink: #14181C; --ink-2: #46505B; --ink-3: #667180;
    --link: #1C5FA6; --accent: #2E6DB0;
    --chart-1: #2F6DB0; --chart-2: #8A6A1E; --chart-3: #16806B; --chart-4: #9A3F1E;
    --ramp-1: #E3EDF8; --ramp-2: #BBD2EC; --ramp-3: #8FB3DC; --ramp-4: #5B8DC4; --ramp-5: #3E6EA3;
    --status-good: #1A7A54; --status-attention: #8A6A1E; --status-critical: #A6303F;
    --shadow: 0 1px 2px rgb(15 20 30 / 0.10);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #FBFCFD; --surface: #FFFFFF; --raised: #F1F4F8; --hairline: #DDE2E9;
  --ink: #14181C; --ink-2: #46505B; --ink-3: #667180;
  --link: #1C5FA6; --accent: #2E6DB0;
  --chart-1: #2F6DB0; --chart-2: #8A6A1E; --chart-3: #16806B; --chart-4: #9A3F1E;
  --ramp-1: #E3EDF8; --ramp-2: #BBD2EC; --ramp-3: #8FB3DC; --ramp-4: #5B8DC4; --ramp-5: #3E6EA3;
  --status-good: #1A7A54; --status-attention: #8A6A1E; --status-critical: #A6303F;
  --shadow: 0 1px 2px rgb(15 20 30 / 0.10);
}