/* ============================================================
   IT PULSE — DESIGN TOKENS
   Mission Control direction
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Type scale — fluid, TV-aware */
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Sizing */
  --header-h: 64px;
  --sidebar-w: 320px;

  /* Radii — sharp, minimal */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;

  /* Spacing scale (4px base) */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
  --s10: 40px;
  --s12: 48px;
  --s16: 64px;

  /* Density modifiers — set via [data-density] */
  --density: 1;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 280ms;
  --dur-slow: 480ms;

  /* Status — semantic, theme-shared */
  --ok: #10b981;
  --warn: #f59e0b;
  --err: #ef4444;
  --info: #3b82f6;
  --neutral: #94a3b8;
}

[data-density="compact"]   { --density: 0.85; }
[data-density="comfortable"] { --density: 1; }
[data-density="spacious"]  { --density: 1.18; }

/* ── Light theme ─────────────────────────────────── */
[data-theme="light"] {
  --bg-0: #f6f7f9;       /* canvas */
  --bg-1: #ffffff;       /* surface */
  --bg-2: #f1f3f6;       /* sunken */
  --bg-3: #e8ebef;       /* deeper */
  --bg-elev: #ffffff;    /* card on canvas */

  --line: #e2e6ec;
  --line-soft: #eef0f4;
  --line-strong: #cbd2dc;

  --fg-0: #0a0e17;       /* primary text */
  --fg-1: #2d3748;       /* secondary */
  --fg-2: #6b7385;       /* tertiary */
  --fg-3: #9aa3b3;       /* muted */
  --fg-mono: #475569;    /* monospace numerals */

  --accent: var(--accent-base, #2563eb);
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-fg: #ffffff;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.06);

  --grid-line: rgba(15, 23, 42, 0.04);
}

/* ── Dark theme (default) ─────────────────────────── */
[data-theme="dark"] {
  --bg-0: #0c1019;
  --bg-1: #131a26;
  --bg-2: #1a2230;
  --bg-3: #232c3d;
  --bg-elev: #161e2d;

  --line: #232c3d;
  --line-soft: #1c2433;
  --line-strong: #2e3a4f;

  --fg-0: #f1f5fa;
  --fg-1: #c8d1de;
  --fg-2: #8e99ac;
  --fg-3: #5c6679;
  --fg-mono: #a3b0c5;

  --accent: var(--accent-base, #60a5fa);
  --accent-soft: color-mix(in srgb, var(--accent) 18%, transparent);
  --accent-fg: #050810;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.45);

  --grid-line: rgba(255, 255, 255, 0.04);
}

/* ── True Black theme (OLED / TV) ─────────────────── */
[data-theme="black"] {
  --bg-0: #000000;
  --bg-1: #0a0a0c;
  --bg-2: #111114;
  --bg-3: #18181c;
  --bg-elev: #0a0a0c;

  --line: #1c1c20;
  --line-soft: #141418;
  --line-strong: #2a2a30;

  --fg-0: #ffffff;
  --fg-1: #d4d4d8;
  --fg-2: #909098;
  --fg-3: #56565c;
  --fg-mono: #b8b8c0;

  --accent: var(--accent-base, #5eead4);
  --accent-soft: color-mix(in srgb, var(--accent) 15%, transparent);
  --accent-fg: #000000;

  --shadow-sm: none;
  --shadow-md: none;

  --grid-line: rgba(255, 255, 255, 0.03);
}

/* Status surfaces (work across all themes via color-mix) */
[data-theme] {
  --ok-bg: color-mix(in srgb, var(--ok) 14%, transparent);
  --warn-bg: color-mix(in srgb, var(--warn) 14%, transparent);
  --err-bg: color-mix(in srgb, var(--err) 14%, transparent);
  --info-bg: color-mix(in srgb, var(--info) 14%, transparent);
  --neutral-bg: color-mix(in srgb, var(--neutral) 14%, transparent);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--bg-0);
  color: var(--fg-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  font-synthesis: none;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
input, select, textarea { font: inherit; color: inherit; }

/* Custom scrollbar — subtle, theme-aware */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: var(--fg-3); }

/* Utility classes */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tnum { font-variant-numeric: tabular-nums; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--fg-1);
}