/* xerofee design tokens — transcribed from the xerofee design system (tokens.json v1).
   Change values there first, then here. */

@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/BricolageGrotesque-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/BricolageGrotesque-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../fonts/HankenGrotesk-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../fonts/HankenGrotesk-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../fonts/HankenGrotesk-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  color-scheme: light;

  --ground: #f4f2ec;
  --surface: #ffffff;
  --surface-2: #e9e6dd;
  --ink: #1c2422;
  --ink-2: #41504c;
  --muted: #7b837d;
  --line: #e0dcd1;
  --line-strong: #c6c2b4;
  --accent: #1f5f63;
  --accent-ink: #194e52;
  --accent-fill: #1f5f63;
  --accent-soft: #e0eceb;
  --on-accent: #ffffff;
  --ok: #2f6b52;
  --ok-ink: #24543f;
  --ok-soft: #e4efe9;
  --wait: #b0791c;
  --wait-ink: #8a5d12;
  --wait-soft: #faf0dc;

  --shadow-card: 0 1px 2px rgba(45,32,20,0.05), 0 8px 20px rgba(45,32,20,0.06);

  --font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 15px;
  --space-5: 22px;
  --space-6: 30px;

  --radius-sm: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --ground: #101413;
    --surface: #181d1c;
    --surface-2: #212725;
    --ink: #eaede9;
    --ink-2: #c3ccc8;
    --muted: #8b958f;
    --line: #262c2a;
    --line-strong: #363e3b;
    --accent: #63b7b8;
    --accent-ink: #86cfcf;
    --accent-fill: #2e7f82;
    --accent-soft: #142a2b;
    --on-accent: #08191a;
    --ok: #6bc79b;
    --ok-ink: #8fddb8;
    --ok-soft: #14291f;
    --wait: #e6b673;
    --wait-ink: #f0c68f;
    --wait-soft: #2c2214;

    --shadow-card: 0 1px 2px rgba(0,0,0,0.45), 0 8px 20px rgba(0,0,0,0.4);
  }
}