:root {
  color-scheme: light;
  --ink: #162333;
  --muted: #596778;
  --brand: #12304a;
  --brand-strong: #0c2439;
  --accent: #b85d45;
  --accent-strong: #91422f;
  --paper: #f7f8f8;
  --surface: #ffffff;
  --surface-alt: #eef2f3;
  --line: #d7dfe3;
  --success: #236445;
  --warning: #8a5d13;
  --danger: #a2332b;
  --focus: #0b6cff;
  --shadow: 0 10px 30px rgba(19, 39, 55, .09);
  --radius: 8px;
  --content: 1120px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --bg: var(--paper);
  --panel: var(--surface);
  --soft-ink: var(--muted);
  --green: var(--brand);
  --green-soft: color-mix(in srgb, var(--brand) 11%, white);
  --blue: var(--brand);
  --blue-soft: color-mix(in srgb, var(--brand) 10%, white);
  --violet: #5b4bb7;
  --violet-soft: #ece9fb;
  --red: var(--danger);
  --red-soft: color-mix(in srgb, var(--danger) 9%, white);
  --yellow: var(--warning);
  --yellow-soft: color-mix(in srgb, var(--warning) 10%, white);
}

html[data-theme="natur"] {
  --brand: #1f493c;
  --brand-strong: #15372d;
  --accent: #9b6c24;
  --accent-strong: #795119;
  --paper: #f8f7f1;
  --surface-alt: #edf1e9;
  --line: #d6ded2;
}

html[data-theme="nordisch"] {
  --brand: #14525b;
  --brand-strong: #0d3c43;
  --accent: #b95d3d;
  --accent-strong: #91452d;
  --paper: #f3f6f5;
  --surface-alt: #e9f0ef;
  --line: #d2dfdf;
}

html[data-theme="fruehling"] {
  --brand: #466450;
  --brand-strong: #304a38;
  --accent: #a84f3d;
  --accent-strong: #803929;
  --paper: #fbfaf6;
  --surface-alt: #eef2ec;
  --line: #d7dfd5;
}

html[data-theme="herbst"] {
  --brand: #3f4938;
  --brand-strong: #2c3426;
  --accent: #95482e;
  --accent-strong: #70321f;
  --paper: #f6f3ec;
  --surface-alt: #eee9dd;
  --line: #d9d1c3;
}

html[data-theme="winter"] {
  --brand: #17324d;
  --brand-strong: #0e2438;
  --accent: #8b6a23;
  --accent-strong: #674d18;
  --paper: #f2f6f8;
  --surface-alt: #e8eff2;
  --line: #d0dce2;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}