:root {
  --color-canvas: #f3f1eb;
  --color-surface: #fffefa;
  --color-surface-sky: #e3ebf3;
  --color-surface-sand: #e9ddc7;
  --color-surface-forest: #e6ebe3;
  --color-ink: #202823;
  --color-muted: #5c665f;
  --color-sky: #315e91;
  --color-sky-strong: #234a77;
  --color-forest: #2f4735;
  --color-moss: #68755a;
  --color-sand: #d6b98b;
  --color-divider: #d4d6cf;
  --color-control-border: #7b847e;
  --color-danger: #9b3f38;
  --color-warning: #8b5d20;
  --font-ui: "Golos Text", "Segoe UI", Arial, sans-serif;
  --font-reading: "Literata", Georgia, "Times New Roman", serif;
  --shell: min(1280px, calc(100% - 40px));
  --reading-width: 46rem;
  --radius-control: 6px;
  --radius-layer: 10px;
  --shadow-layer: 0 18px 50px rgba(32, 40, 35, .14);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --bg: var(--color-canvas);
  --paper: var(--color-surface);
  --paper-soft: #efeee9;
  --ink: var(--color-ink);
  --muted: var(--color-muted);
  --line: var(--color-divider);
  --teal: var(--color-forest);
  --teal-dark: #203728;
  --teal-soft: var(--color-surface-forest);
  --blue: var(--color-sky);
  --blue-dark: var(--color-sky-strong);
  --red: var(--color-danger);
  --amber: var(--color-warning);
  --green: var(--color-forest);
  --danger: var(--color-danger);
  --sans: var(--font-ui);
}