/* ============================================================
   Timing.SpeedTools design system — tokens
   Source: GhostTime public/timingguy-app.css · artifact https://claude.ai/artifact/4ywtS8TC87HJPz18KZbCmY
   Light is default; set data-theme="dark" on <html> for dark.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap");

:root, [data-theme="light"] {
  --navy: #0f1e36;
  --cyan: #19c3f0;
  --red: #db3537;
  --orange: #ff8a3d;
  --bg: #f4f6fa;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --border: #e4e9f1;
  --border-strong: #d3dae5;
  --text: #0f1e36;
  --text-2: #5b6b82;
  --text-3: #8a99af;
  --accent: #0e8fb5;
  --accent-soft: rgba(14, 143, 181, 0.12);
  --accent-track: rgba(14, 143, 181, 0.16);
  --warn: #c98a00;
  --warn-soft: rgba(201, 138, 0, 0.12);
  --crit: #db3537;
  --crit-soft: rgba(219, 53, 55, 0.10);
  --good: #1e8e4e;
  --good-soft: rgba(30, 142, 78, 0.12);
  --primary-bg: var(--navy);
  --primary-fg: #ffffff;
  --side-bg: var(--navy);
  --side-text: #c9d5e6;
  --side-muted: #7f93af;
  --side-hover: rgba(255, 255, 255, 0.06);
  --side-active: rgba(25, 195, 240, 0.14);
  --flag-green: #1e9e4b;
  --flag-yellow: #f2c200;
  --flag-red: var(--red);
  --flag-white: #ffffff;
  --shadow: 0 1px 2px rgba(15, 30, 54, 0.05), 0 4px 16px -8px rgba(15, 30, 54, 0.12);
}
:root[data-theme="dark"], [data-theme="dark"] {
  --bg: #0b1628;
  --surface: #13264a;
  --surface-2: #10213f;
  --border: rgba(159, 179, 204, 0.16);
  --border-strong: rgba(159, 179, 204, 0.28);
  --text: #ffffff;
  --text-2: #9fb3cc;
  --text-3: #7388a6;
  --accent: #0b98c2;
  --accent-soft: rgba(25, 195, 240, 0.16);
  --accent-track: rgba(11, 152, 194, 0.24);
  --warn: #ad9200;
  --warn-soft: rgba(233, 196, 36, 0.14);
  --crit: #e04466;
  --crit-soft: rgba(224, 68, 102, 0.16);
  --good: #3fbf77;
  --good-soft: rgba(63, 191, 119, 0.16);
  --primary-bg: var(--cyan);
  --primary-fg: var(--navy);
  --side-bg: #081222;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
:root {
  --gap-grid: 18px;
  --pad-card-y: 18px;
  --pad-card-x: 20px;
  --pad-content: 32px;
  --pad-content-mobile: 16px;
  --pad-row-x: 14px;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --sidebar-w: 248px;
  --logo-h: 46px;
  --control-h: 38px;
  --control-h-sm: 30px;
  --content-max: 1400px;
  --font-sans: "Barlow", "Barlow Condensed", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  /* short names used by components.css */
  --font: var(--font-sans);
  --mono: var(--font-mono);
  --ease: cubic-bezier(0, 0, 0.2, 1);
}
.t-page-title { font-family: var(--font-sans); font-size: 30px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
.t-kpi-value { font-family: var(--font-sans); font-size: 30px; line-height: 1.1; font-weight: 600; letter-spacing: -0.01em; }
.t-topbar-title { font-family: var(--font-sans); font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
.t-card-title { font-family: var(--font-sans); font-size: 16px; line-height: 1.3; font-weight: 600; }
.t-body { font-family: var(--font-sans); font-size: 15px; line-height: 1.45; font-weight: 400; }
.t-label { font-family: var(--font-sans); font-size: 14px; line-height: 1.3; font-weight: 600; }
.t-meta { font-family: var(--font-sans); font-size: 13px; line-height: 1.35; font-weight: 400; }
.t-eyebrow { font-family: var(--font-sans); font-size: 12px; line-height: 1.3; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.t-mono { font-family: var(--font-mono); font-size: 13px; line-height: 1.5; font-weight: 400; }