/* ------------------------------------------------------------------ *
 *  Design tokens. Light palette on :root, dark overrides below.
 *  A manual [data-theme] on <html> wins over prefers-color-scheme.
 * ------------------------------------------------------------------ */
:root {
  --font-ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif;

  --bg: #f5f5f7;
  --surface: #ffffff;
  --surface-2: #fbfbfd;
  --header-bg: #f0f0f3;
  --text: #1d1d1f;
  --text-dim: #6e6e73;
  --border: #d9d9de;
  --grid-line: #e6e6ea;
  --accent: #0a84ff;
  --accent-weak: rgba(10, 132, 255, 0.14);
  --accent-header: rgba(10, 132, 255, 0.22);
  --danger: #ff3b30;
  --logo-keyline: #111111;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 6px 20px rgba(0, 0, 0, 0.06);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --radius: 12px;
  --radius-sm: 8px;

  /* chart series -- consistent across bar & line */
  --series-1: #0a84ff;
  --series-2: #30d158;
  --series-3: #ff9f0a;
  --series-4: #ff375f;
  --series-5: #bf5af2;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #1c1c1e;
    --surface: #2c2c2e;
    --surface-2: #262628;
    --header-bg: #333336;
    --text: #f5f5f7;
    --text-dim: #a1a1a6;
    --border: #3a3a3d;
    --grid-line: #38383b;
    --accent: #0a84ff;
    --accent-weak: rgba(10, 132, 255, 0.22);
    --accent-header: rgba(10, 132, 255, 0.32);
    --logo-keyline: #f2f2f4;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 8px 28px rgba(0, 0, 0, 0.45);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  }
}

:root[data-theme='dark'] {
  --bg: #1c1c1e;
  --surface: #2c2c2e;
  --surface-2: #262628;
  --header-bg: #333336;
  --text: #f5f5f7;
  --text-dim: #a1a1a6;
  --border: #3a3a3d;
  --grid-line: #38383b;
  --accent: #0a84ff;
  --accent-weak: rgba(10, 132, 255, 0.22);
  --accent-header: rgba(10, 132, 255, 0.32);
  --logo-keyline: #f2f2f4;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 8px 28px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
}

* {
  box-sizing: border-box;
}

html,
body,
#app {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overflow: hidden; /* the app manages its own scroll containers */
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}