@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/BarlowCondensed-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/BarlowCondensed-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/fonts/OpenSans.woff2') format('woff2');
}

:root {
  color-scheme: light dark;

  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Open Sans', system-ui, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #eef0f3;
  --text: #15181d;
  --text-muted: #5b6370;
  --border: #d7dbe1;
  --border-strong: #aeb5bf;

  --accent: #1f5fbf;
  --accent-hover: #184c99;
  --accent-text: #ffffff;
  --focus: #1f5fbf;

  --ok-bg: #e6f4ea;
  --ok-text: #1e6b34;
  --ok-border: #a9d6b5;
  --warn-bg: #fff4e0;
  --warn-text: #8a5300;
  --warn-border: #f0cf8a;
  --danger: #b42318;
  --danger-bg: #fdecea;
  --danger-text: #8c1d13;
  --danger-border: #f0b4ad;

  --shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 8px 24px rgb(0 0 0 / 0.06);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1216;
    --surface: #171b21;
    --surface-2: #1f242c;
    --text: #e8eaee;
    --text-muted: #9aa3b0;
    --border: #2c333d;
    --border-strong: #46505d;

    --accent: #6ea0ec;
    --accent-hover: #88b2f1;
    --accent-text: #0b1322;
    --focus: #6ea0ec;

    --ok-bg: #12301b;
    --ok-text: #8fd3a3;
    --ok-border: #245c35;
    --warn-bg: #3a2a0b;
    --warn-text: #f1c678;
    --warn-border: #6b4d12;
    --danger: #f08b82;
    --danger-bg: #3a1613;
    --danger-text: #f5a9a2;
    --danger-border: #6b2a24;

    --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px rgb(0 0 0 / 0.35);
  }
}