/* Кольори й розміри Mini App. Тему ставить data-theme на <html>, а без нього — система. */
:root {
  --color-bg: #f4f1ec;
  --color-section: #ffffff;
  --color-section-pressed: #ece7df;
  --color-text: #1d1a16;
  --color-hint: #857d72;
  --color-accent: #b4532a;
  --color-accent-text: #a14a25;
  --color-on-accent: #ffffff;
  --color-separator: rgb(29 26 22 / 9%);
  --color-accent-soft: rgb(180 83 42 / 12%);
  --color-success: #2f7d4f;
  --color-input: #e9e4dc;
  --color-shadow: rgb(29 26 22 / 14%);

  /* Корінці книжок без обкладинки: приглушені «палітурні» кольори. */
  --spine-0: #7a3b2e;
  --spine-1: #2f5d50;
  --spine-2: #34507a;
  --spine-3: #8a6a2f;
  --spine-4: #5b4472;
  --spine-5: #4c5a3a;
  --color-on-spine: rgb(255 255 255 / 88%);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 16px;
  --radius-pill: 999px;

  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  /* Назви книжок набрані антиквою, як на титулі. */
  --font-family-title: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-family-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --font-size-xs: 12px;
  --font-size-s: 14px;
  --font-size-m: 16px;
  --font-size-l: 20px;
  --font-size-xl: 26px;
  --font-size-xxl: 34px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 600;
  --line-height: 1.45;

  /* Висота вікна без нижньої панелі Telegram: браузерні 100vh про панель не знають. */
  --viewport-height: var(--tg-viewport-stable-height, 100vh);
  --safe-area-bottom: max(var(--tg-safe-area-inset-bottom, 0px), env(safe-area-inset-bottom, 0px));

  --tap-min: 44px;
  --border-width: 1px;
}

:root[data-theme="dark"] {
  --color-bg: #141210;
  --color-section: #1f1c19;
  --color-section-pressed: #2a2622;
  --color-text: #f2ede6;
  --color-hint: #9b9286;
  --color-accent: #e07a4b;
  --color-accent-text: #ec8a5c;
  --color-on-accent: #1d0f08;
  --color-separator: rgb(242 237 230 / 8%);
  --color-accent-soft: rgb(224 122 75 / 16%);
  --color-success: #62c08a;
  --color-input: #262220;
  --color-shadow: rgb(0 0 0 / 45%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #141210;
    --color-section: #1f1c19;
    --color-section-pressed: #2a2622;
    --color-text: #f2ede6;
    --color-hint: #9b9286;
    --color-accent: #e07a4b;
    --color-accent-text: #ec8a5c;
    --color-on-accent: #1d0f08;
    --color-separator: rgb(242 237 230 / 8%);
    --color-accent-soft: rgb(224 122 75 / 16%);
  --color-success: #62c08a;
    --color-input: #262220;
    --color-shadow: rgb(0 0 0 / 45%);
  }
}