/* Earshot design tokens. Honor Labs look (same palette as the Honor Labs Hub). See DESIGN_SYSTEM.md.
   Light is the default whatever the system says. Dark only when data-theme="dark" is set on <html>. */
:root {
  color-scheme: light;
  --bg: #f4f9f3;
  --surface: #ffffff;
  --surface-2: #e9f1ec;
  --text: #0b2440;
  --text-2: #33506e;
  --text-3: #4a6684;
  --border: #dce5ee;
  --border-strong: #b9c8d8;
  --accent: #0f54aa;
  --accent-hover: #09315d;
  --accent-ink: #ffffff;
  --accent-bg: #e4eefa;
  --red: #b42318;
  --red-bg: #fdecea;
  --orange: #8a5300;
  --orange-bg: #fff3db;
  --green: #1f7a4d;
  --green-bg: #e3f4ea;
  --blue: #0f54aa;
  --blue-bg: #e8f4fa;
  --focus: #1a92d0;
  --shadow: 0 1px 2px rgba(9, 49, 93, 0.08);
  --overlay: rgba(9, 49, 93, 0.45);

  /* Honor Labs brand colors, for marks, rules and large numerals (not small text on white) */
  --navy: #09315d;
  --bright: #1a92d0;
  --teal: #3bc1c6;
  --leaf: #a4d16d;

  --font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --font-brand: 'Bricolage Grotesque', 'Poppins', system-ui, sans-serif;

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --radius: 10px;
  --radius-pill: 999px;
  --side-w: 232px;
  --content-max: 1280px;
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #071b33;
  --surface: #0c2a4d;
  --surface-2: #123560;
  --text: #eaf2fa;
  --text-2: #b4c6da;
  --text-3: #93a9c2;
  --border: #1d4271;
  --border-strong: #2d5a8f;
  --accent: #3bc1c6;
  --accent-hover: #6fd6da;
  --accent-ink: #06203a;
  --accent-bg: #10425a;
  --red: #ff8f84;
  --red-bg: #43211f;
  --orange: #f0b45e;
  --orange-bg: #3d2d14;
  --green: #7fd3a3;
  --green-bg: #12382a;
  --blue: #7cc0ee;
  --blue-bg: #12395e;
  --focus: #7cc0ee;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  --overlay: rgba(0, 0, 0, 0.6);
}