/* ======================================================================
   THEME TOKENS (SOFTER LIGHT THEME) + GLOBAL BASE — CORE ONLY
   ====================================================================== */
:root{
  /* м’яка світла тема */
  --bg:#f2f4f8;
  --text:#1f2430;
  --muted:#6b7280;

  --brand:#fabc44;
  --brand-600:#e0a000;
  --brand-700:#c38800;

  --card:#ffffff;
  --border:#e1e4ee;
  --input:#fafbfe;
  --link:#2f6feb;

  --ok:#19c37d; --warn:#ffb020; --danger:#f04438;

  --shadow-1:0 8px 26px rgba(20,24,40,.06);
  --shadow-2:0 16px 42px rgba(20,24,40,.10);
  --ring:0 0 0 3px rgba(250,188,68,.35);

  --chip:#eef1f7; --chip-text:#2f3445;

  /* тривалість плавної зміни теми */
  --theme-dur:320ms;

  /* підказка браузеру для нативних контролів */
  color-scheme: light;
}

[data-theme="dark"]{
  --bg:#575C71;
  --text:#eef1f7;
  --muted:#b7bdd1;

  --card:#2e3350;
  --border:#444a66;
  --input:#343a5a;
  --link:#82aaff;

  --shadow-1:0 10px 30px rgba(0,0,0,.25);
  --shadow-2:0 20px 45px rgba(0,0,0,.35);
  --ring:0 0 0 3px rgba(250,188,68,.45);

  --chip:#404660; --chip-text:#f6f7fb;

  /* нативні елементи (скролбари, інпути) теж темні */
  color-scheme: dark;
}

/* ======================================================================
   GLOBAL RESET / BASE
   ====================================================================== */
*{ box-sizing:border-box }
html{ scroll-behavior:smooth; }
body{
  margin:0; color:var(--text); min-height:100vh;
  background: var(--bg);
  font:16px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  overflow-x:hidden;
}

/* Контейнер — базова сітка сторінки (використовується всіма секціями) */
.container{ max-width:1200px; margin:0 auto; padding:12px 20px; }

/* ======================================================================
   THEME SWITCH ANIMATIONS (SCOPED)
   ====================================================================== */
/* Плавність лише під час активного перемикання теми */
html.theme-switching, html.theme-switching *:not(.no-theme-anim, .no-theme-anim *){
  transition:
    background-color var(--theme-dur) ease,
    color            var(--theme-dur) ease,
    border-color     var(--theme-dur) ease,
    fill             var(--theme-dur) ease,
    stroke           var(--theme-dur) ease,
    box-shadow       var(--theme-dur) ease;
}

/* Опційно: швидший старт для великих шарів UI
html.theme-switching body{ transition-duration: calc(var(--theme-dur) * .85); }
*/

/* ======================================================================
   THEME WAVE OVERLAY (for ripple/wipe switch)
   ====================================================================== */
.theme-wave{
  position: fixed;
  left: 0; top: 0;
  width: 0; height: 0;
  border-radius: 50%;
  pointer-events: none;
  transform: scale(0);
  opacity: 0.9;
  z-index: 9999;
  will-change: transform, opacity;
  animation: theme-wave-expand 0.6s ease-out forwards;
  /* фон хвилі задаємо інлайн-стилем із JS відповідно до майбутньої теми */
}
@keyframes theme-wave-expand{
  to{
    transform: scale(4);
    opacity: 0;
  }
}

/* Можна вимкнути хвилю локально */
.no-theme-anim .theme-wave{ display:none !important; }

/* ======================================================================
   ACCESSIBILITY / UTILS
   ====================================================================== */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

:focus-visible{ outline:var(--ring); outline-offset:2px; border-radius:10px; }

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}

/* ======================================================================
   «ЖИВИЙ» ФОН
   ====================================================================== */
.bg-orbs{
  position:fixed; inset:-20vmax; z-index:-1; filter: blur(50px) saturate(120%);
  pointer-events:none;
}
.orb{
  position:absolute; width:40vmax; height:40vmax; border-radius:50%;
  opacity:.18; mix-blend-mode:screen;
  background:
    radial-gradient(circle at 30% 30%, #ffd66e, transparent 60%),
    radial-gradient(circle at 70% 70%, #ff8ea3, transparent 60%),
    radial-gradient(circle at 40% 80%, #82aaff, transparent 60%);
  animation: floatXY 18s ease-in-out infinite alternate;
}
.orb:nth-child(2){ left:60%; top:10%; width:55vmax; height:55vmax; opacity:.16; animation-duration:22s; }
.orb:nth-child(3){ left:10%; top:65%; width:45vmax; height:45vmax; opacity:.14; animation-duration:26s; }
@keyframes floatXY{
  0%{ transform: translate3d(-6vmax,-4vmax,0) scale(1); }
  100%{ transform: translate3d(6vmax,4vmax,0) scale(1.05); }
}

  /* На широких екранах можна зробити акуратніший вигляд */
  @media (min-width: 900px){
    .topbar .search{
      max-width: 720px;
    }
  }