/* Спільна база: шрифт, змінні, ресет, елементи, що є і на публічній, і в адмінці.
   Сторінкові стилі живуть окремо в app.css / admin.css — щоб класи не перетиналися. */

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/static/fonts/Inter-Variable.woff2) format("woff2");
}

:root {
  --paper:      #FEFBF4;
  --card:       #FFFFFF;
  --card-2:     #FBF7EF;
  --ink:        #000000;
  --ink-soft:   #333333;
  --muted:      #777777;
  --faint:      #8F8F8F;
  --line:       #E7E7E7;
  --line-2:     #F0EBE1;
  --shadow:     0 4px 30px #F9F1DF;
  --shadow-lg:  0 8px 44px #F4E9D2;
  --yellow:     #FFEBB9;
  --yellow-2:   #F3D68E;
  --green-soft: #E5F2DE;
  --green:      #5E9645;
  --violet-soft:#EFE6F5;
  --violet:     #6C5B8E;
  --blue:       #3B7AAE;
  --red:        #C0563F;
  --r-card:     20px;
  --r-pill:     50px;
  --maxw:       1080px;
}

html[data-theme="dark"] {
  --paper:      #14120E;
  --card:       #1E1B16;
  --card-2:     #2B2620;
  --ink:        #F6F1E7;
  --ink-soft:   #DCD5C8;
  --muted:      #A29A8C;
  --faint:      #7E7669;
  --line:       #322D25;
  --line-2:     #2A251E;
  --shadow:     0 4px 30px rgba(0,0,0,.45);
  --shadow-lg:  0 8px 44px rgba(0,0,0,.55);
  --yellow:     #4B3F1E;
  --yellow-2:   #6B5926;
  --green-soft: #23331D;
  --green:      #8CC470;
  --violet-soft:#2C2438;
  --violet:     #B49FD8;
  --blue:       #7FB2DC;
  --red:        #E08A72;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.55 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
  transition: background .25s ease, color .25s ease;
}

a { color: inherit; }

/* Тумблер теми — однаковий на всіх сторінках */
.theme {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--card); color: var(--ink); cursor: pointer;
  transition: border-color .2s, transform .15s;
}
.theme:hover { border-color: var(--ink); transform: rotate(-12deg); }
.ic-moon { display: none; }
html[data-theme="dark"] .ic-sun { display: none; }
html[data-theme="dark"] .ic-moon { display: block; }

/* Тост */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px);
  background: var(--ink); color: var(--paper);
  padding: 11px 20px; border-radius: var(--r-pill);
  font-size: 13.5px; font-weight: 600;
  opacity: 0; pointer-events: none; z-index: 60;
  transition: opacity .25s, transform .25s;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

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