/* CallIQ design tokens. Warm orange palette taken from the CallIQ logo. See DESIGN_SYSTEM.md.
   Light is the default whatever the system says. Dark only when data-theme="dark" is set on <html>.
   Text and button pairs are checked for WCAG AA (4.5:1) by test/theme.test.js. */
:root {
  color-scheme: light;
  --bg: #fdf8f4;
  --surface: #ffffff;
  --surface-2: #f7eee7;
  --text: #2b1a12;
  --text-2: #5a4336;
  --text-3: #6f5a4d;
  --border: #eadfd6;
  --border-strong: #cdbcae;
  /* Deep orange for links, buttons and small text. The logo orange (#e2470f) is only 4.1:1 on white, so it is kept for marks and large type. */
  --accent: #c53606;
  --accent-hover: #9e2b03;
  --accent-ink: #ffffff;
  --accent-bg: #fdece3;
  --red: #b4153c;
  --red-bg: #fdecef;
  --orange: #8a5300;
  --orange-bg: #fff3db;
  --green: #1f7a4d;
  --green-bg: #e3f4ea;
  --plum: #6b3a96;
  --plum-bg: #f3eafa;
  --focus: #e2470f;
  --shadow: 0 1px 2px rgba(59, 29, 16, 0.08);
  --overlay: rgba(43, 26, 18, 0.45);

  /* CallIQ logo colors, for marks, rules and large numerals (not small text on white) */
  --brand: #e2470f;
  --brand-2: #f26b2a;
  --brand-3: #f9a94b;
  --navy: #3b1d10;
  --agent: #e2470f;
  --agent-ink: #b93408;
  --caller: #9a5bc4;
  --caller-ink: #7a3ba6;
  --amber: #c27800;

  /* Chart series: eight steps that stay apart from each other and hold 3:1 on white */
  --series-1: #e2470f;
  --series-2: #8a4bb5;
  --series-3: #c98500;
  --series-4: #4d7c3a;
  --series-5: #b4153c;
  --series-6: #7a4a30;
  --series-7: #4f7a94;
  --series-8: #8a766a;

  --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: #1a110c;
  --surface: #251912;
  --surface-2: #31221a;
  --text: #f6ece5;
  --text-2: #d3bfb2;
  --text-3: #b09d90;
  --border: #43312a;
  --border-strong: #5c443a;
  --accent: #ff8a5c;
  --accent-hover: #ffa683;
  --accent-ink: #2b1208;
  --accent-bg: #4a2214;
  --agent: #ff8a5c;
  --agent-ink: #ff9d78;
  --caller: #b98ae0;
  --caller-ink: #c9a0ea;
  --amber: #f0b45e;
  --navy: #f6ece5;
  --red: #ff8da6;
  --red-bg: #44181f;
  --orange: #f0b45e;
  --orange-bg: #3d2d14;
  --green: #7fd3a3;
  --green-bg: #12382a;
  --plum: #c9a0ea;
  --plum-bg: #35224a;
  --focus: #ff8a5c;
  --series-1: #ff8a5c;
  --series-2: #c49be6;
  --series-3: #e8c547;
  --series-4: #9bc783;
  --series-5: #ff8da6;
  --series-6: #d1a284;
  --series-7: #8fb8d1;
  --series-8: #8a8f99;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  --overlay: rgba(0, 0, 0, 0.6);
}