/* ═══════════════════════════════════════════════════════
   Design Tokens — Запрошення ✦
   ═══════════════════════════════════════════════════════ */

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

:root {
  /* ── Palette ── */
  --ink:        #18120a;
  --paper:      #faf6f0;
  --warm:       #f0e8d8;
  --card:       #ffffff;
  --gold:       #7c5510;
  --gold-light: #f5e8c8;
  --gold-dim:   rgba(201,146,42,.12);
  --green:      #2d7a4f;
  --green-bg:   #e8f5ee;
  --red:        #c0392b;
  --red-bg:     #fdecea;
  --blue:       #2563eb;
  --blue-bg:    #eff6ff;
  --purple:     #7c3aed;
  --purple-bg:  #f3e8ff;
  --muted:      #6b6058;
  --border:     rgba(180,140,60,.2);
  --shadow:     0 4px 32px rgba(0,0,0,.08);
  --shadow-lg:  0 12px 60px rgba(0,0,0,.1);

  /* ── Sidebar (dashboard) ── */
  --sidebar-bg:      #1a120a;
  --sidebar-bg-hover:#2d2010;
  --sidebar-text:    rgba(255,255,255,.65);
  --sidebar-active:  rgba(201,146,42,.25);

  /* ── Sizing ── */
  --topbar-h:   58px;
  --sidebar-w:  260px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-pill:30px;

  /* ── Typography ── */
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: 'Playfair Display', Georgia, serif;

  /* ── Transitions ── */
  --ease: cubic-bezier(.4, 0, .2, 1);
}

html, body {
  min-height: 100vh;
  background: var(--paper);
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  overflow-x: hidden;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #b07d1e; }

/* ── Selection ── */
::selection {
  background: var(--gold-light);
  color: var(--ink);
}

/* ── Animations ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes pop {
  0%   { transform: scale(.85); opacity: 0; }
  60%  { transform: scale(1.06); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}
@keyframes confetti-fall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .4; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes slideOutRight {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(100%); opacity: 0; }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes slideUpModal {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes notifSlideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes notifSlideUp {
  from { transform: translateY(0); opacity: 1; }
  to   { transform: translateY(-100%); opacity: 0; }
}