/*
 * Design tokens for every ReplyGuy surface: the product, sign-in, and the audit/voice/launch
 * pages. Components read tokens, never literals, so a brand pass changes this file only.
 *
 * The palette: a blue-and-white core (a vivid blue sidebar and primary action on cool white),
 * with three highlights that each mean one thing:
 *   green   going well, or the one next step to take (--live, --ok)
 *   orange  waiting, or needs a look (--warn)
 *   red     failed, removed, or destructive (--bad)
 * Text on each was checked: white on --brand 5.3:1 and on --sidebar 7.2:1, deep green on
 * --live 5.8:1, deep brown on --warn-fill 6.7:1, --bad on --bad-soft 5.1:1, --muted 5.4:1.
 * --data-2 and --dim are for graphics only (bars, cells, rules), never for text.
 *
 * The product pins itself light (<html data-theme="light">); the public audit pages follow the
 * visitor's system theme through the dark values below.
 */
:root {
  --paper: #f4f8fd;
  --surface: #ffffff;
  --surface-2: #edf3fb;
  --ink: #0f2d4a;
  --ink-2: #2f4a66;
  --muted: #566d84;
  --line: #dbe5f1;
  --line-strong: #bacbdf;

  --brand: #1a68d1;         /* primary actions, links, the current thing */
  --brand-hover: #1559b5;
  --brand-soft: #e8f1fd;
  --brand-ink: #1557a0;     /* brand-coloured text on --brand-soft */
  --sidebar: #1557a0;
  --sidebar-ink: #d9e9fb;
  --sidebar-hover: rgba(255, 255, 255, .10);
  --sidebar-active: rgba(255, 255, 255, .18);

  --data: #3d8fe0;          /* signal: bars, related cells */
  --data-2: #9cc8f2;        /* graphics only */
  --data-soft: #e6f1fc;
  --dim: #9cc8f2;           /* graphics only */
  --empty: #e9eff7;         /* an empty cell */

  --live: #12b886;          /* green: the one next step, things going well */
  --live-hover: #0fa678;
  --on-live: #052e22;
  --ok: #0b7f5c;
  --ok-soft: #e2f7ee;
  --warn-fill: #f59f00;     /* orange: waiting, needs a look */
  --on-warn: #3d2600;
  --warn: #a35a00;
  --warn-soft: #fff3df;
  --bad-fill: #c92a2a;      /* red: failed, removed, destructive */
  --bad: #c2252b;
  --bad-soft: #ffecec;
  --focus: #1a68d1;

  --f-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --f-mark: "Poppins", var(--f-sans);   /* the REPLYGUY wordmark only */

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --shadow: 0 1px 2px rgba(15, 45, 74, .05), 0 10px 28px -14px rgba(15, 45, 74, .18);
  --shadow-pop: 0 18px 48px -18px rgba(15, 45, 74, .35);

  --t-fast: 120ms;
  --t-med: 200ms;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #101a20; --surface: #16232b; --surface-2: #1d2c35; --ink: #e6eef2; --ink-2: #c3d3dc;
    --muted: #93a9b6; --line: #24343e; --line-strong: #334854; --data: #6fb1f2; --data-2: #2f6fb0; --data-soft: #142b42; --brand: #5aa2f0; --brand-hover: #7ab6f5; --brand-soft: #142b42; --brand-ink: #9cc8f2;
    --dim: #4f7a8e; --empty: #1f2e37; --live: #20c997; --live-hover: #38d9a9; --on-live: #052e22;
    --ok: #4fd3a1; --ok-soft: #10281f; --warn: #ffc053; --warn-soft: #2d2212; --warn-fill: #f59f00; --on-warn: #3d2600; --bad: #ff8b80; --bad-soft: #2f1614; --bad-fill: #e5383b;
    --focus: #6fb1f2; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #101a20; --surface: #16232b; --surface-2: #1d2c35; --ink: #e6eef2; --ink-2: #c3d3dc;
  --muted: #93a9b6; --line: #24343e; --line-strong: #334854; --data: #6fb1f2; --data-2: #2f6fb0; --data-soft: #142b42; --brand: #5aa2f0; --brand-hover: #7ab6f5; --brand-soft: #142b42; --brand-ink: #9cc8f2;
  --dim: #4f7a8e; --empty: #1f2e37; --live: #20c997; --live-hover: #38d9a9; --on-live: #052e22;
  --ok: #4fd3a1; --ok-soft: #10281f; --warn: #ffc053; --warn-soft: #2d2212; --warn-fill: #f59f00; --on-warn: #3d2600; --bad: #ff8b80; --bad-soft: #2f1614; --bad-fill: #e5383b;
  --focus: #6fb1f2; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6);
  color-scheme: dark;
}