/* Blackgum Labs design tokens. Generated from one source: change values there, not here.
   Load the fonts with:
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600&family=Unbounded:wght@300;500;700&display=swap"> */
:root {
  /* brand constants */
  --brand-graphite: #15181C;
  --brand-paper: #F3F4F1;
  --brand-ember: #FF5A1F;

  /* theme colours (light by default) */
  --color-bg: #F3F4F1;
  --color-surface: #E8EAE5;
  --color-surface-raised: #FFFFFF;
  --color-fg: #15181C;
  --color-muted: #4A4F4A;
  --color-line: #D3D6CF;
  --color-accent: #FF5A1F;
  --color-accent-text: #B83D0C;
  --color-on-accent: #15181C;
  --color-success: #1A7046;
  --color-warning: #8A5A00;
  --color-danger: #C4283B;
  --color-info: #2563B8;

  /* type */
  --font-display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --font-body: "Instrument Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --text-caption: 0.8125rem; --leading-caption: 1.4;
  --text-body: 1rem; --leading-body: 1.6;
  --text-lead: 1.1875rem; --leading-lead: 1.55;
  --text-h3: 1.25rem; --leading-h3: 1.3;
  --text-h2: 1.75rem; --leading-h2: 1.2;
  --text-h1: 2.75rem; --leading-h1: 1.08;

  /* shape and space */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  color-scheme: light;
}

/* dark: follows the OS unless the app forces a theme with data-theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #15181C;
    --color-surface: #1C2025;
    --color-surface-raised: #242930;
    --color-fg: #F3F4F1;
    --color-muted: #A9AEA8;
    --color-line: #2C3137;
    --color-accent: #FF5A1F;
    --color-accent-text: #FF7A45;
    --color-on-accent: #15181C;
    --color-success: #4CC38A;
    --color-warning: #F2B705;
    --color-danger: #FF6B7A;
    --color-info: #6CA8F0;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --color-bg: #15181C;
  --color-surface: #1C2025;
  --color-surface-raised: #242930;
  --color-fg: #F3F4F1;
  --color-muted: #A9AEA8;
  --color-line: #2C3137;
  --color-accent: #FF5A1F;
  --color-accent-text: #FF7A45;
  --color-on-accent: #15181C;
  --color-success: #4CC38A;
  --color-warning: #F2B705;
  --color-danger: #FF6B7A;
  --color-info: #6CA8F0;
  color-scheme: dark;
}

body {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}