/* Design tokens: every color, font and radius the UI uses, named once.
   Light values live on :root; `html.dark` swaps them (theme.js toggles the
   class and stores the choice). Components read var(--x) and never hardcode. */

:root {
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --bg: #F7F6F2;
  --surface: #FFFFFF;
  --surface-2: #FAFAF7;
  --border: #E6E4DC;
  --border-2: #EFEDE6;
  --text: #1F1F1F;
  --text-2: #4B4F52;
  --muted: #8A9095;

  --brand: #00CE80;
  --brand-dark: #00A366;
  --brand-ink: #0B7A4C;
  --brand-tint: #E3F8EF;
  --on-brand: #0B2A1D;
  --on-accent: #FFFFFF; /* text on top of an arbitrary data color (area, provider, project) */

  --danger: #D6453C;
  --danger-tint: #FBE9E7;
  --warn: #B57900;
  --warn-tint: #FFF3CC;
  --info: #3B6FE0;
  --info-tint: #E8EEFB;
  --orange: #C96A2B;
  --orange-tint: #FBEDE3;

  /* Chart series, in order of use. Readable on light surfaces. */
  --chart-1: #2A78D6;
  --chart-2: #EB6834;
  --chart-3: #1BAF7A;
  --chart-4: #EDA100;
  --chart-5: #E87BA4;
  --chart-6: #5B8C00;
  --chart-7: #6D5BD0;
  --chart-8: #E34948;

  --code-bg: #F2F1EC;
  --row-hover: #FAFAF7;
  --sidebar: #FFFFFF;
  --topbar: #FFFFFF;
  --backdrop: rgba(31, 31, 31, 0.45);
  --shadow: 0 1px 2px rgba(31, 31, 31, 0.04), 0 8px 24px -16px rgba(31, 31, 31, 0.18);

  --radius-card: 14px;
  --radius-input: 10px;
  --radius-pill: 99px;

  color-scheme: light;
}

html.dark {
  /* A softer dark (2026-09-26): surfaces a step lighter than near-black, still a dark theme. */
  --bg: #1E201D;
  --surface: #262924;
  --surface-2: #2D302B;
  --border: #3B3F39;
  --border-2: #333730;
  --text: #F2F1EC;
  --text-2: #C7CAC4;
  --muted: #9CA29C;

  --brand: #00CE80;
  --brand-dark: #00CE80;
  --brand-ink: #5FE4AE;
  --brand-tint: #1E4332;
  --on-brand: #0B2A1D;
  --on-accent: #FFFFFF;

  --danger: #F0776F;
  --danger-tint: #48302C;
  --warn: #FFC838;
  --warn-tint: #4B4224;
  --info: #7EA2F5;
  --info-tint: #333C4A;
  --orange: #F09A5E;
  --orange-tint: #493627;

  --chart-1: #6FA8F0;
  --chart-2: #F58E63;
  --chart-3: #4CCF9C;
  --chart-4: #F5BE3C;
  --chart-5: #F2A0C2;
  --chart-6: #9CCB4A;
  --chart-7: #9F92E8;
  --chart-8: #F07370;

  --code-bg: #31342F;
  --row-hover: #2D302B;
  --sidebar: #232621;
  --topbar: #232621;
  --backdrop: rgba(0, 0, 0, 0.5);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -16px rgba(0, 0, 0, 0.6);

  color-scheme: dark;
}