/* Sparky design tokens. The content area follows [data-theme] (see themes.css); the
   sidebar and brand zones always stay navy, so their tokens (--nav-*) never change. */
:root {
  /* Content area (light) */
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-alt: #f8f9fc;
  --surface-hover: #f2f4f8;
  --surface-sunken: #eef0f4;
  --border: #e7e9ee;
  --border-input: #e2e5eb;
  --border-strong: #d8dde6;
  --text-primary: #0b1329;
  --text-body: #344054;
  --text-secondary: #667085;
  --text-tertiary: #9aa3b2;

  /* Accents: blue = interaction / focus / active, orange = main call to action */
  --accent: #3b82f6;
  --accent-strong: #2563eb;
  --accent-soft: rgba(59, 130, 246, 0.12);
  --accent-grad: linear-gradient(135deg, #5a8cf0, #2c4fc0);
  --cta: #ff9d41;
  --cta-strong: #e17a1f;
  --cta-ink: #221605;
  --cta-soft: rgba(255, 157, 65, 0.16);
  --cta-grad: linear-gradient(135deg, #ff9d41, #e17a1f);

  --color-positive: #6fb83f;
  --color-positive-soft: rgba(111, 184, 63, 0.16);
  --color-purple: #b267d4;
  --color-purple-soft: rgba(178, 103, 212, 0.16);
  --color-mustard: #afa72e;
  --color-mustard-soft: rgba(175, 167, 46, 0.18);
  --color-danger: #ef4444;
  --color-danger-soft: rgba(239, 68, 68, 0.12);
  --color-force: #ef4444;
  --color-velocity: #3b82f6;
  --color-energy: #ff9d41;

  /* Brand / navy zones (fixed across themes) */
  --nav-bg: #0b1329;
  --nav-bg-soft: #16213d;
  --nav-card: #0c1c31;
  --nav-border: #0c2742;
  --nav-line: rgba(255, 255, 255, 0.07);
  --nav-hover: rgba(255, 255, 255, 0.05);
  --nav-active: rgba(59, 130, 246, 0.16);
  --nav-text: #94a3b8;
  --nav-text-strong: #ffffff;
  --sim-bg: #0b1329;

  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 3px rgba(11, 19, 41, 0.06);
  --shadow-hover: 0 16px 32px rgba(11, 19, 41, 0.10);
  --shadow-dropdown: 0 12px 28px rgba(11, 19, 41, 0.14);
  --shadow-dropdown-dark: 0 16px 40px rgba(0, 0, 0, 0.4);
  --focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.12);

  --font-sans: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-mono: 'Cascadia Code', 'Consolas', 'SFMono-Regular', Menlo, monospace;

  --sidebar-width: 260px;
  --sidebar-collapsed-width: 76px;
  --mobile-bar-height: 60px;
  --ease: 0.18s ease;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-sans);
  font-weight: 800;
  margin: 0 0 8px;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

p { margin: 0 0 12px; color: var(--text-secondary); }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
img { max-width: 100%; }

::selection { background: rgba(59, 130, 246, 0.22); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}
.app-sidebar :focus-visible, .mobile-bar :focus-visible, .dark-zone :focus-visible { outline-color: #7dd3fc; }

.mono { font-family: var(--font-mono); }

/* Thin scrollbars inside panels */
* { scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, 0.3) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.3); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.5); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}