/* ══ FIALA · дизайн-токени ═══════════════════════════════════════════
   Айдентика перебудована за трьома брендбуками — MISSTIC, korean story
   і turbòtica. Вони різні на вигляд, але мова в них одна, і саме її
   тут узято, а не настрій котрогось одного:

   1. Тло тепле й кремове, а не біле. #FFF8EE, #F5F4EB, #F9F9F9 у трьох
      книгах — одна й та сама відмова від холодного паперу.
   2. Один глибокий насичений колір дому, який лягає великими плашками:
      бордо #821532, оксамитовий #8A0304, мока #7D4C3A. Тут — бордо.
   3. Рожевий не мікроакцент, а поле. Так само велике, як бордо.
   4. Дві гарнітури: гротеск на все робоче й акцидентна антиква на
      заголовки. Manrope + Cormorant — єдина пара з трьох книг, у якій
      обидві гарнітури мають кирилицю (Instrument Serif і Archivo
      Expanded її не мають, тож повторити їх українською неможливо).
   5. Ані тіней, ані градієнтів, ані скруглень. Межу малює лінія в один
      піксель або зміна тла — і ніколи обидва разом.

   Світла тема самостійна, а не інверсія темної. Бордо на кремі читається
   як фірмовий колір; на темному воно перетворюється на бруд, тому там
   акцентом стає рожевий — рівно так, як у MISSTIC на чорних розворотах.
   Контраст ≥ 4.5:1 в обох темах перевіряє build/contrast.py.        */

:root {
  color-scheme: light dark;

  --bg:         #FBF6EC;
  --bg-2:       #F4EDDF;
  --surface:    #FFFCF5;
  --surface-2:  #F7F0E2;
  --surface-3:  #EEE5D4;
  --ink:        #1B1A17;
  --ink-2:      #3D3A33;
  --muted:      #6A645A;
  --line:       #E7DECB;
  --line-2:     #D2C8B2;

  --accent:       #7E1B34;
  --accent-ink:   #FFF8EE;
  --accent-soft:  #F6E7EA;
  --accent-line:  #E2C3CC;
  --blush:        #EFC9D7;
  --pos:          #4C5A20;
  --pos-soft:     #ECEEDA;
  --warn:         #8A5A24;
  --warn-soft:    #F7ECD9;
  --dang:         #A32E17;
  --dang-soft:    #FAE6DE;
  --info:         #41526C;
  --info-soft:    #E9ECF1;
  --neutral-soft: #EFE8D9;

  /* Скруглень практично немає: у всіх трьох книгах плашка — це
     прямокутник. 2 px лишається тільки щоб край не «дзвенів». */
  --r-xs: 1px; --r-sm: 2px; --r-md: 2px; --r-lg: 3px; --r-xl: 4px; --r-pill: 999px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 36px;

  /* Тінь лишилась там, де шар справді висить над сторінкою — і тільки
     там. Картка, кнопка й рядок таблиці її не мають узагалі. */
  --shadow-1: none;
  --shadow-2: 0 2px 8px rgba(27, 26, 23, .07), 0 18px 44px rgba(27, 26, 23, .11);
  --shadow-3: -20px 0 60px rgba(27, 26, 23, .15);
  --ring: 0 0 0 3px var(--accent-soft);

  --ui: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --display: var(--ui);
  --serif: 'Cormorant', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Одна крива на весь застосунок. Рух, який приходить з різними
     easing, читається як різні застосунки в одному вікні. */
  --ease: cubic-bezier(.22, .8, .28, 1);
  --t-fast: 130ms;
  --t: 200ms;
  --t-slow: 320ms;

  --side-w: 244px;
  --top-h: 60px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:         #141310;
    --bg-2:       #1A1814;
    --surface:    #1F1C17;
    --surface-2:  #262218;
    --surface-3:  #2E2920;
    --ink:        #F3ECDE;
    --ink-2:      #D0C8B9;
    --muted:      #9B9484;
    --line:       #2A2620;
    --line-2:     #3B352C;

    --accent:       #E7A9BE;
    --accent-ink:   #2A0E17;
    --accent-soft:  #2E171D;
    --accent-line:  #46262F;
    --blush:        #E7A9BE;
    --pos:          #AFBE63;
    --pos-soft:     #202414;
    --warn:         #D89A5E;
    --warn-soft:    #2B2115;
    --dang:         #EE8168;
    --dang-soft:    #2E1811;
    --info:         #9BAEC9;
    --info-soft:    #1B2028;
    --neutral-soft: #272319;

    --shadow-1: none;
    --shadow-2: 0 2px 10px rgba(0, 0, 0, .5), 0 20px 52px rgba(0, 0, 0, .6);
    --shadow-3: -20px 0 64px rgba(0, 0, 0, .66);
    --ring: 0 0 0 3px rgba(231, 169, 190, .2);
  }
}

:root[data-theme="dark"] {
  --bg:         #141310;
  --bg-2:       #1A1814;
  --surface:    #1F1C17;
  --surface-2:  #262218;
  --surface-3:  #2E2920;
  --ink:        #F3ECDE;
  --ink-2:      #D0C8B9;
  --muted:      #9B9484;
  --line:       #2A2620;
  --line-2:     #3B352C;

  --accent:       #E7A9BE;
  --accent-ink:   #2A0E17;
  --accent-soft:  #2E171D;
  --accent-line:  #46262F;
  --blush:        #E7A9BE;
  --pos:          #AFBE63;
  --pos-soft:     #202414;
  --warn:         #D89A5E;
  --warn-soft:    #2B2115;
  --dang:         #EE8168;
  --dang-soft:    #2E1811;
  --info:         #9BAEC9;
  --info-soft:    #1B2028;
  --neutral-soft: #272319;

  --shadow-1: none;
  --shadow-2: 0 2px 10px rgba(0, 0, 0, .5), 0 20px 52px rgba(0, 0, 0, .6);
  --shadow-3: -20px 0 64px rgba(0, 0, 0, .66);
  --ring: 0 0 0 3px rgba(231, 169, 190, .2);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 14px/1.5 var(--ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
  /* Прапорці й повзунки браузера теж мусять бути бордовими: інакше
     на екрані зʼявляється системний синій, якого в палітрі немає. */
  accent-color: var(--accent);
  font-feature-settings: 'tnum' 0;
}

/* Заголовок — антиква, підзаголовок — гротеск. Межа проходить рівно
   там, де закінчується «мова бренду» й починається робоча підказка:
   h1 і h2 називають розділ, h3 і h4 позначають поле. */
h1, h2 {
  font-family: var(--serif);
  font-weight: 600;
  margin: 0;
  letter-spacing: -.004em;
}
/* Інтерліньяж менший за кегль — так у turbòtica і в korean story:
   заголовок мусить виглядати монолітом, а не набором рядків. */
h1 { font-size: 31px; line-height: .96; }
h2 { font-size: 20px; line-height: 1; }

h3, h4 {
  font-family: var(--ui);
  font-weight: 700;
  margin: 0;
  letter-spacing: -.012em;
}
h3 { font-size: 13px; }
h4 { font-size: 12px; }

/* Правило MISSTIC: у заголовку з антикви одне слово йде курсивом,
   решта прямим. Тому <em> усередині h1/h2 — це не наголос, а прийом. */
h1 em, h2 em { font-style: italic; font-weight: 500; }

a { color: inherit; }

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

:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 0;
}

::selection { background: var(--accent); color: var(--accent-ink); }

.mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.num { text-align: right; font-size: 12.5px; letter-spacing: -.02em; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.tiny { font-size: 11px; letter-spacing: .01em; }
.strong { font-weight: 600; }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row { display: flex; align-items: center; gap: var(--sp-2); }
.row.wrap { flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: var(--sp-2); }
.grow { flex: 1 1 auto; min-width: 0; }
.hidden { display: none !important; }

/* Надрядковий підпис із розрідженням — головний повторюваний елемент
   усіх трьох книг: маленький капс ліворуч, лінія під ним, і далі вміст. */
.eyebrow {
  font: 700 10px/1 var(--ui);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Скролбар: у темній темі системний лишається світлою смугою і рве
   картинку сильніше, ніж здається. */
* { scrollbar-color: var(--line-2) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border: 3.5px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

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