/* Design tokens. Light by default, dark via prefers-color-scheme. */
:root {
  color-scheme: light dark;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "Cascadia Code", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs: 14px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 20px;
  --fs-kpi: 28px;
  --lh: 1.45;

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

  --r-sm: 4px;
  --r: 6px;
  --r-lg: 8px;
  --r-xl: 12px;

  --ctl-h: 34px;
  --ctl-h-sm: 28px;
  --sidebar-w: 220px;
  --sidebar-w-collapsed: 60px;
  --detail-w: clamp(420px, 38vw, 680px);

  --dur: 160ms;
  --dur-slow: 240ms;
  --ease: cubic-bezier(.2, .8, .2, 1);

  --z-sticky: 10;
  --z-panel: 40;
  --z-toast: 1000;

  /* light palette */
  --bg: #f3f4f6;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --surface-3: #eef0f3;
  --sidebar-bg: #ffffff;
  --hover: #f1f3f6;
  --border: #d9dde3;
  --border-strong: #b6bdc8;
  --text: #111827;
  --text-2: #374151;
  --muted: #5b6472;

  --primary: #1d4ed8;
  --primary-hover: #1e40af;
  --on-primary: #ffffff;
  --primary-soft: #e8efff;
  --primary-text: #1d4ed8;

  --danger: #b91c1c;
  --danger-hover: #991b1b;
  --danger-text: #b91c1c;
  --danger-soft: #fdecec;
  --danger-border: #f0b4b4;

  --success-text: #166534;
  --success-soft: #e6f5eb;
  --success-border: #a7dcb9;
  --warning-text: #854d0e;
  --warning-soft: #fdf3d7;
  --warning-border: #ecd28a;
  --info-text: #1e40af;
  --info-soft: #e6efff;
  --info-border: #b3c8f5;
  --neutral-text: #374151;
  --neutral-soft: #eceef2;
  --neutral-border: #cfd4db;

  --focus: #2563eb;

  --chart-sent: #2563eb;
  --chart-failed: #dc2626;
  --chart-grid: #e6e8ec;
  --chart-axis: #5b6472;
  --chart-hover: rgba(37, 99, 235, .07);

  --shadow-1: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow-2: 0 4px 12px rgba(16, 24, 40, .10);
  --shadow-pop: 0 12px 32px rgba(16, 24, 40, .20);
  --scrim: rgba(15, 23, 42, .5);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1015;
    --surface: #161a21;
    --surface-2: #1b2029;
    --surface-3: #222833;
    --sidebar-bg: #12151b;
    --hover: #202631;
    --border: #2b323e;
    --border-strong: #404a59;
    --text: #e7eaef;
    --text-2: #c9cfd8;
    --muted: #9ba4b1;

    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --on-primary: #ffffff;
    --primary-soft: #182544;
    --primary-text: #8cb4ff;

    --danger: #dc2626;
    --danger-hover: #b91c1c;
    --danger-text: #ff8f8f;
    --danger-soft: #341719;
    --danger-border: #6e2a2d;

    --success-text: #74e0a0;
    --success-soft: #11291c;
    --success-border: #255a3b;
    --warning-text: #f5cf5b;
    --warning-soft: #30260d;
    --warning-border: #67521b;
    --info-text: #9cc2ff;
    --info-soft: #13233f;
    --info-border: #2b4878;
    --neutral-text: #c9cfd8;
    --neutral-soft: #262c37;
    --neutral-border: #3a4351;

    --focus: #6ea8ff;

    --chart-sent: #4f8dfd;
    --chart-failed: #f87171;
    --chart-grid: #262c37;
    --chart-axis: #9ba4b1;
    --chart-hover: rgba(110, 168, 255, .08);

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-2: 0 4px 12px rgba(0, 0, 0, .45);
    --shadow-pop: 0 12px 32px rgba(0, 0, 0, .6);
    --scrim: rgba(0, 0, 0, .62);
  }
}