@font-face { font-family: 'Lato'; src: url('/fonts/lato-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('/fonts/lato-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('/fonts/lato-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  /* Нативні контроли (карет, скролбари, попап селекта, автозаповнення) —
     у схемі теми, а не світлі плями на темному тлі */
  color-scheme: dark;
  --sc-bg: #121211;
  --sc-panel: #1b1a19;
  --sc-panel-2: #201f1e;
  --sc-line: rgba(255, 255, 255, 0.08);
  --sc-text: #f4f4f2;
  --sc-muted: #8f8d8a;
  --sc-accent: #ffffff;
  --sc-neg: #ff7a6b;
  --sc-warn-bg: rgba(240, 196, 25, 0.1);
  --sc-warn-border: rgba(240, 196, 25, 0.35);
  --sc-info-bg: rgba(255, 255, 255, 0.05);
  /* «активний» елемент (таб, чипс, кнопка) — інверсія фону */
  --sc-active-bg: #ffffff;
  --sc-active-text: #121211;
  --sc-seg-active: #2a2926;
  --sc-ok: #2fbd6c;
  /* Поверхня, що лежить НАД панеллю (попап). На панельному кольорі попап
     зливався з тим, поверх чого спливає, тож він світліший, а не однаковий. */
  --sc-pop-bg: #2b2a27;
  --sc-pop-line: rgba(255, 255, 255, 0.14);
  --sc-pop-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
  --sc-hero-grad: linear-gradient(180deg, #201f1e, #1b1a19);
  --font-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Світла тема. Кольори підібрані під контраст AA на своїх фонах:
   muted ≥4.5:1 на панелях, negative ≥4.5:1 на білому. */
:root[data-theme='light'] {
  color-scheme: light;
  --sc-bg: #f4f4f2;
  --sc-panel: #ffffff;
  --sc-panel-2: #edecea;
  --sc-line: rgba(0, 0, 0, 0.12);
  --sc-text: #17171a;
  --sc-muted: #5f5d59;
  --sc-accent: #121211;
  --sc-neg: #c0301f;
  --sc-warn-bg: rgba(240, 196, 25, 0.18);
  --sc-warn-border: rgba(150, 112, 8, 0.45);
  --sc-info-bg: rgba(0, 0, 0, 0.045);
  --sc-active-bg: #121211;
  --sc-active-text: #ffffff;
  --sc-seg-active: #ffffff;
  --sc-ok: #1e7a47;
  /* У світлій панель уже біла, тож попап відділяє не колір, а тінь і рамка */
  --sc-pop-bg: #ffffff;
  --sc-pop-line: rgba(0, 0, 0, 0.18);
  --sc-pop-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
  --sc-hero-grad: linear-gradient(180deg, #ffffff, #f6f5f3);
}

* { margin: 0; padding: 0; box-sizing: border-box; }