:root {
  --font-sans:
    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;

  --theme-bg-light: #f6f3ed;
  --theme-surface-light: #ffffff;
  --theme-surface-raised-light: #f8f6f1;
  --theme-ink-light: #1b211d;
  --theme-muted-light: #677069;
  --theme-line-light: #ded8ce;
  --theme-line-strong-light: #c8bfb2;
  --theme-accent-light: #165c3a;
  --theme-accent-soft-light: #e3f0e8;
  --theme-warning-light: #875412;
  --theme-warning-soft-light: #fbeddc;
  --theme-danger-light: #b94848;
  --theme-danger-soft-light: #f8e4e1;
  --theme-info-light: #2e7885;
  --theme-info-soft-light: #e0f1f3;
  --theme-note-light: #6d5578;
  --theme-note-soft-light: #eee7f1;
  --theme-brand-light: #2a241f;
  --theme-shadow-light: 0 14px 36px rgba(48, 40, 32, 0.09);

  --theme-bg-dark: #101316;
  --theme-surface-dark: #171b20;
  --theme-surface-raised-dark: #20262d;
  --theme-ink-dark: #f2f5f3;
  --theme-muted-dark: #aeb8b3;
  --theme-line-dark: #2d353d;
  --theme-line-strong-dark: #43505a;
  --theme-accent-dark: #78c997;
  --theme-accent-soft-dark: #183126;
  --theme-warning-dark: #e5b86f;
  --theme-warning-soft-dark: #352a17;
  --theme-danger-dark: #ee8f8f;
  --theme-danger-soft-dark: #382126;
  --theme-info-dark: #82c7d2;
  --theme-info-soft-dark: #16313a;
  --theme-note-dark: #baa9df;
  --theme-note-soft-dark: #28283c;
  --theme-brand-dark: #0b0e11;
  --theme-shadow-dark: 0 18px 48px rgba(0, 0, 0, 0.34);

  --bg: var(--theme-bg-light);
  --surface: var(--theme-surface-light);
  --surface-2: var(--theme-surface-raised-light);
  --ink: var(--theme-ink-light);
  --muted: var(--theme-muted-light);
  --line: var(--theme-line-light);
  --line-strong: var(--theme-line-strong-light);
  --green: var(--theme-accent-light);
  --green-soft: var(--theme-accent-soft-light);
  --amber: var(--theme-warning-light);
  --amber-soft: var(--theme-warning-soft-light);
  --red: var(--theme-danger-light);
  --red-soft: var(--theme-danger-soft-light);
  --teal: var(--theme-info-light);
  --teal-soft: var(--theme-info-soft-light);
  --plum: var(--theme-note-light);
  --plum-soft: var(--theme-note-soft-light);
  --charcoal: var(--theme-brand-light);
  --shadow: var(--theme-shadow-light);

  --radius-sm: 6px;
  --radius-md: 8px;
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--green) 24%, transparent);
}

html,
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  font: inherit;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--theme-bg-dark);
    --surface: var(--theme-surface-dark);
    --surface-2: var(--theme-surface-raised-dark);
    --ink: var(--theme-ink-dark);
    --muted: var(--theme-muted-dark);
    --line: var(--theme-line-dark);
    --line-strong: var(--theme-line-strong-dark);
    --green: var(--theme-accent-dark);
    --green-soft: var(--theme-accent-soft-dark);
    --amber: var(--theme-warning-dark);
    --amber-soft: var(--theme-warning-soft-dark);
    --red: var(--theme-danger-dark);
    --red-soft: var(--theme-danger-soft-dark);
    --teal: var(--theme-info-dark);
    --teal-soft: var(--theme-info-soft-dark);
    --plum: var(--theme-note-dark);
    --plum-soft: var(--theme-note-soft-dark);
    --charcoal: var(--theme-brand-dark);
    --shadow: var(--theme-shadow-dark);
    color-scheme: dark;
  }

  html,
  body {
    background: var(--bg);
    color: var(--ink);
  }
}