/* Design tokens: color, type and spacing for both themes. */

:root {
  --bg: #f1f3f8;
  --surface: #ffffff;
  --panel: #f5f6fb;
  --ink: #0b1222;
  --muted: #55607a;
  --line: #dfe3ee;
  --line-strong: #b4bdd3;

  --brand: #2b50f0;
  --on-brand: #ffffff;
  --brand-soft: #e6ebff;
  --flag: #ffc82e;
  --flag-ink: #2a1f00;
  --night: #0b1222;          /* header and footer, the same in both themes */
  --night-2: #18223d;
  --on-night: #ffffff;
  --on-night-muted: #aab4cc;

  --good: #0a7d45;  --good-bg: #dcf5e7;
  --bad: #c22a3a;   --bad-bg: #fde4e7;
  --warn: #7a5600;  --warn-bg: #fff1c2;
  --focus: #2b50f0;

  --display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --text: "Barlow", "Helvetica Neue", Arial, sans-serif;

  --r-lg: 18px;
  --r: 14px;
  --r-sm: 9px;
  --pad: 1rem;               /* page gutter; grows on wide screens */
  --shadow: 0 1px 2px rgb(11 18 34 / .05), 0 6px 20px -8px rgb(11 18 34 / .12);
  --tabbar: 4rem;            /* height of the phone tab bar */

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #070c18; --surface: #121a2f; --panel: #1a243f; --ink: #f2f5fb; --muted: #a3aec8;
    --line: #26314f; --line-strong: #46557c;
    --brand: #8098ff; --on-brand: #0b1222; --brand-soft: #1c2a5c;
    --good: #5fe0a0; --good-bg: #0e3a26; --bad: #ff8f9c; --bad-bg: #4a1320; --warn: #ffd978; --warn-bg: #3d3000;
    --focus: #9db0ff;
    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px -10px rgb(0 0 0 / .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #070c18; --surface: #121a2f; --panel: #1a243f; --ink: #f2f5fb; --muted: #a3aec8;
  --line: #26314f; --line-strong: #46557c;
  --brand: #8098ff; --on-brand: #0b1222; --brand-soft: #1c2a5c;
  --good: #5fe0a0; --good-bg: #0e3a26; --bad: #ff8f9c; --bad-bg: #4a1320; --warn: #ffd978; --warn-bg: #3d3000;
  --focus: #9db0ff;
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px -10px rgb(0 0 0 / .6);
  color-scheme: dark;
}

@media (min-width: 760px) { :root { --pad: 1.75rem; } }