/*
 * Control Center design tokens — canonical cascade layer.
 * Loaded after app.css so legacy rules consume these values while modules migrate.
 */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  --font-sans: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Newsreader", Georgia, serif;
  --font-data: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* Canonical type scale — shared by every Control Center module. */
  --type-page-title: 30px;
  --type-section-title: 20px;
  --type-card-title: 16px;
  --type-body: 15px;
  --type-ui: 13.5px;
  --type-caption: 12.5px;
  --leading-title: 1.18;
  --leading-body: 1.55;

  --bg: #f3f5f8;
  --panel: #ffffff;
  --ink: #e9eef6;
  --field: #f8fafc;
  --thead: #edf2f8;
  --line: #dce3ed;
  --text: #172033;
  --muted: #647087;

  --brand: #315fce;
  --brand2: #496fc7;
  --holding: #b58b38;
  --ok: #198754;
  --warn: #b96c12;
  --down: #cf3f48;
  --focus: #7099f0;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(23, 32, 51, .06), 0 4px 14px rgba(23, 32, 51, .05);
  --shadow-md: 0 10px 28px rgba(23, 32, 51, .12);
  --shadow-lg: 0 26px 64px rgba(23, 32, 51, .18);
  --shadow: var(--shadow-sm);
  --ring: 0 0 0 3px rgba(49, 95, 206, .22);
  --grad: linear-gradient(135deg, var(--brand), #5e78bd);

  --duration-fast: 120ms;
  --duration-base: 180ms;
  --ease: cubic-bezier(.2, .75, .25, 1);

  --z-sticky: 20;
  --z-nav: 50;
  --z-popover: 200;
  --z-dialog: 1200;
  --z-toast: 1400;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0d121b;
  --panel: #151c28;
  --ink: #202a3a;
  --field: #101722;
  --thead: #121a26;
  --line: #2a3547;
  --text: #edf1f7;
  --muted: #9aa6b8;

  --brand: #789bf0;
  --brand2: #8ba7e8;
  --holding: #d2ad5d;
  --ok: #43bd7b;
  --warn: #dda14f;
  --down: #ef6971;
  --focus: #9ab7ff;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 5px 16px rgba(0, 0, 0, .24);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, .42);
  --shadow-lg: 0 28px 72px rgba(0, 0, 0, .58);
  --shadow: var(--shadow-sm);
  --ring: 0 0 0 3px rgba(120, 155, 240, .3);
  --grad: linear-gradient(135deg, var(--brand), #9b86dc);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 1ms;
    --duration-base: 1ms;
  }
}