:root {
  /* Колір */
  --c-bg: #fcfcfa;
  --c-bg-subtle: #f4f3ef;
  --c-text: #14181f;
  --c-text-muted: #5a6270;
  --c-primary: #1e3a5f; /* темно-синій, з логотипа */
  --c-primary-ink: #162c48; /* hover */
  --c-accent: #c8952b; /* золото, лише дрібні акценти */
  --c-sky: #7fa8d4; /* світло-синій, великі площини */
  --c-border: #dedcd5;
  --c-focus: #1e3a5f;

  /* Fixed brand navy for solid button fills — intentionally NOT overridden
     in the dark-theme block below. --c-primary swaps to a light blue in dark
     mode (right for text/links on a dark background), but a filled button
     needs a background dark enough for permanently-white text to stay
     WCAG AA (>=4.5:1) in both themes. */
  --c-button-primary-bg: #1e3a5f;
  --c-button-primary-bg-hover: #162c48;

  /* Типографіка */
  --f-serif: 'Literata', Georgia, 'Times New Roman', serif;
  --f-sans: 'Inter', system-ui, -apple-system, sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fs-3xl: 2.75rem;
  --fs-4xl: 3.5rem;

  --lh-tight: 1.2;
  --lh-normal: 1.65;
  --lh-loose: 1.75;

  /* Простір, крок 8px */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4rem;
  --s-7: 6rem;
  --s-8: 8rem;

  /* Ширини */
  --w-prose: 42rem; /* ~68 символів */
  --w-content: 60rem;
  --w-wide: 75rem;

  --radius: 2px; /* майже прямі кути, без «дружніх» заокруглень */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --c-bg: #12151a;
    --c-bg-subtle: #1a1f27;
    --c-text: #e8e6e1;
    --c-text-muted: #9aa2b0;
    --c-primary: #7fa8d4;
    --c-primary-ink: #a3c2e4;
    --c-accent: #d9a94a;
    --c-border: #2a303a;
  }
}