/* =========================================================================
   theme.css — the ONLY place colours and fonts are defined.
   Dark is the default. assets/js/theme.js switches <html data-theme="light">.
   Rule: components use these tokens, never raw hex values.
   ========================================================================= */
@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root,
:root[data-theme="dark"] {
  /* surfaces */
  --bg: #242424;
  --panel: #2c2c2b;
  --panel-2: #323230;
  --line: #3b3b39;
  --track: #3a3a37;

  /* text */
  --fg: #f1f0ea;
  --fg-soft: #d6d5ce;
  --muted: #a6a59d;
  --faint: #6f6e68;

  /* brand fills (shapes: servers, balancer, request pills) */
  --yellow: #f5cd2a;
  --teal: #12a98d;
  --pill: #33d4f2;
  --ink: #1d1d1b;          /* text on yellow / cyan fills */
  --on-accent: #ffffff;    /* text on teal fills */

  /* accent text (headings, links, highlights) */
  --accent-text: #f5cd2a;
  --teal-text: #12a98d;
  --cyan: #33d4f2;
  --red: #ff5d70;
  --good-text: #7fe3c9;
  --bad-text: #ff9aa7;

  /* subject accents (hub) */
  --orange: #ff9f3f;
  --blue: #5aa2ff;
  --violet: #b78cff;

  /* details */
  --teal-wash: #1f3a34;
  --code-bg: #1d1d1b;
  --code-fg: #f5cd2a;
  --chip-bg: #1d1d1b;
  --dot-empty: rgba(29, 29, 27, .16);
  --dot-hot: #c8283d;
  --glow-static: rgba(255, 255, 255, .55);
  --glow-dynamic: rgba(255, 93, 112, .85);

  /* type */
  --display: "Barlow", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #f3f3ef;
  --panel: #ffffff;
  --panel-2: #ebebe5;
  --line: #d9d8d0;
  --track: #e2e1da;

  --fg: #1d1d1b;
  --fg-soft: #3b3b37;
  --muted: #5f5e58;
  --faint: #8b8a83;

  --yellow: #f5cd2a;
  --teal: #12a98d;
  --pill: #33d4f2;
  --ink: #1d1d1b;
  --on-accent: #ffffff;

  --accent-text: #8f6a00;
  --teal-text: #0b7c67;
  --cyan: #0a7f9e;
  --red: #d42f47;
  --good-text: #0b7c67;
  --bad-text: #c22a40;

  --orange: #c86a00;
  --blue: #2f6fd6;
  --violet: #7a4fd6;

  --teal-wash: #d7efe8;
  --code-bg: #ebeae3;
  --code-fg: #8a5f00;
  --chip-bg: #ffffff;
  --dot-empty: rgba(29, 29, 27, .16);
  --dot-hot: #c8283d;
  --glow-static: rgba(0, 0, 0, .22);
  --glow-dynamic: rgba(212, 47, 71, .45);

  color-scheme: light;
}