/* ───────── Design tokens ───────── */
:root {
  --bg: #f8f6f1;
  --surface: #ffffff;
  --surface-2: #f2efe8;
  --line: #e6e1d6;
  --line-2: #efebe2;

  --ink: #27312f;
  --ink-2: #56625f;
  --ink-3: #87918e;

  --sage: #7fa896;
  --sage-d: #356b5a;
  --sage-l: #e4efe9;
  --sky: #a9c8e0;
  --sky-d: #3a6786;
  --sky-l: #e5eff7;
  --blush: #e8beb5;
  --blush-d: #9a524a;
  --blush-l: #f9e8e4;
  --sand: #e3d3b5;
  --sand-d: #7f6330;
  --sand-l: #f6eedd;
  --lilac: #c8bee0;
  --lilac-d: #5f5290;
  --lilac-l: #eeeaf7;

  --ok: #356b5a;
  --ok-l: #e4efe9;
  --bad: #a24a42;
  --bad-l: #fbe9e6;

  --radius: 18px;
  --radius-sm: 12px;
  --shadow-sm: 0 1px 2px rgba(39, 49, 47, 0.05);
  --shadow: 0 1px 2px rgba(39, 49, 47, 0.04), 0 10px 30px rgba(39, 49, 47, 0.06);
  --shadow-lg: 0 2px 4px rgba(39, 49, 47, 0.04), 0 18px 50px rgba(39, 49, 47, 0.1);

  --font-sans: 'Noto Sans Georgian', 'Sylfaen', 'Segoe UI', system-ui, sans-serif;
  --font-serif: 'Noto Serif Georgian', 'Sylfaen', Georgia, serif;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* chapter tones: set --t (accent), --t-d (text on tint), --t-l (tint) */
.tone-sage { --t: var(--sage); --t-d: var(--sage-d); --t-l: var(--sage-l); }
.tone-sky { --t: var(--sky); --t-d: var(--sky-d); --t-l: var(--sky-l); }
.tone-blush { --t: var(--blush); --t-d: var(--blush-d); --t-l: var(--blush-l); }
.tone-sand { --t: var(--sand); --t-d: var(--sand-d); --t-l: var(--sand-l); }
.tone-lilac { --t: var(--lilac); --t-d: var(--lilac-d); --t-l: var(--lilac-l); }

/* ───────── Reset ───────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.7 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
  overflow-wrap: break-word;
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
a { color: var(--sage-d); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
img { max-width: 100%; display: block; }
table { border-collapse: collapse; width: 100%; }
::selection { background: var(--sage-l); }

:focus-visible { outline: 2px solid var(--sage-d); outline-offset: 2px; border-radius: 8px; }

.i { flex: none; vertical-align: middle; }
svg.i * { stroke-width: 1.6; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px;
}
.skip:focus { top: 12px; }

/* ───────── Buttons ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: 999px; font-weight: 500; font-size: 15px; line-height: 1.2;
  border: 1.5px solid transparent; transition: background .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease), box-shadow .2s var(--ease);
  white-space: nowrap; text-decoration: none !important;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--sage-d); color: #fff; }
.btn-primary:hover { background: #2b5c4c; }
.btn-soft { background: var(--sage-l); color: var(--sage-d); }
.btn-soft:hover { background: #d6e7de; }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--sage); background: var(--sage-ll, #f4f9f6); }
.btn-blush { background: var(--blush-l); color: var(--blush-d); }
.btn-blush:hover { background: #f4dbd5; }
.btn[disabled], .btn[aria-disabled='true'] { opacity: .45; pointer-events: none; }
.btn-sm { padding: 8px 14px; font-size: 14px; }
.btn-icon { width: 42px; height: 42px; padding: 0; }

/* ───────── Chips / tags ───────── */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; line-height: 1.5;
  background: var(--t-l, var(--sage-l)); color: var(--t-d, var(--sage-d));
}
.chip-outline { background: transparent; border: 1px solid var(--line); color: var(--ink-2); }

.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-chip {
  padding: 7px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  font-size: 14px; color: var(--ink-2); transition: all .2s var(--ease);
}
.filter-chip:hover { border-color: var(--sage); color: var(--ink); }
.filter-chip[aria-pressed='true'], .filter-chip.is-active { background: var(--sage-d); border-color: var(--sage-d); color: #fff; }

/* ───────── Cards ───────── */
.card {
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* progress bar */
.bar { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 99px; background: var(--sage); transition: width .5s var(--ease); }

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