/* ═══════════════════════════════════════════════════════════
   VolMap — общая тема
   Подключается на всех страницах ПОСЛЕ их встроенных <style>,
   поэтому переопределяет старые чёрно-белые токены.

   Палитра: «самаркандская бирюза» + холодные чернильные нейтрали.
   Цвет категорий используется только там, где он что-то значит
   (пины, бейджи, полоски у карточек, статистика).
═══════════════════════════════════════════════════════════ */

:root {
  --font: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif: var(--font);
  --sans:  var(--font);
  --mono:  var(--font);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
}

/* ── Категории (одинаково на всех страницах) ── */
[data-theme="light"] {
  --cat-music:  #7a5af8;
  --cat-sport:  #f3701e;
  --cat-art:    #d13fa6;
  --cat-tech:   #2f6fe4;
  --cat-food:   #e2a400;
  --cat-nature: #2faa5a;
  --cat-social: #e5484d;
  --cat-other:  #6b7b88;
}
[data-theme="dark"] {
  --cat-music:  #9a82ff;
  --cat-sport:  #ff8a45;
  --cat-art:    #ec5fc0;
  --cat-tech:   #5b90f5;
  --cat-food:   #f2b91f;
  --cat-nature: #45c274;
  --cat-social: #ff6b70;
  --cat-other:  #8ea0ad;
}

/* ═════════ LIGHT ═════════ */
[data-theme="light"] {
  --bg:      #ffffff;
  --bg-2:    #f2f6f7;
  --bg-3:    #e6edf0;
  --bg-4:    #d6e0e5;
  --bg2:     var(--bg-2);
  --surface: #f7fafb;
  --raised:  #eef3f5;

  --border:     rgba(15, 40, 55, .08);
  --border-md:  rgba(15, 40, 55, .14);
  --border-str: rgba(15, 40, 55, .26);

  --text:       #0f1d26;
  --text-2:     #3f515e;
  --text-3:     #5f707d;
  --text-4:     #8494a1;
  --text2:      var(--text-2);
  --text-sec:   #4a5b68;
  --text-muted: #728492;

  --brand:       #0a7f8c;
  --brand-hover: #08707b;
  --brand-ink:   #ffffff;
  --brand-text:  #066571;
  --brand-soft:  rgba(10, 127, 140, .10);
  --brand-soft-2:rgba(10, 127, 140, .18);

  --gold:      #e9a11b;
  --gold-soft: rgba(233, 161, 27, .15);
  --gold-text: #8a5a00;

  --accent:     var(--brand);
  --accent-inv: var(--brand-ink);
  --inv:        var(--brand-ink);

  --success:    #1f8a4c;
  --success-bg: #e5f5ec;
  --ok:         var(--success);
  --ok-bg:      var(--success-bg);
  --danger:     #d23f3f;
  --danger-bg:  #fdecec;
  --err:        var(--danger);
  --err-bg:     var(--danger-bg);
  --info-bg:    var(--bg-2);

  --shadow-sm: 0 1px 2px rgba(15,40,55,.06), 0 1px 3px rgba(15,40,55,.05);
  --shadow-md: 0 4px 16px rgba(15,40,55,.10), 0 1px 3px rgba(15,40,55,.05);
  --shadow-lg: 0 12px 40px rgba(15,40,55,.16), 0 3px 10px rgba(15,40,55,.06);
  --shadow-xl: 0 28px 72px rgba(15,40,55,.22);
  --sm: var(--shadow-sm);
  --md: var(--shadow-md);
  --lg: var(--shadow-lg);

  --pin-fill: var(--brand);
  --pin-bg:   #dbe8ec;
  --pill-active-bg:   var(--brand);
  --pill-active-text: #ffffff;
}

/* ═════════ DARK ═════════ */
[data-theme="dark"] {
  --bg:      #0e161b;
  --bg-2:    #141f26;
  --bg-3:    #1b2933;
  --bg-4:    #25363f;
  --bg2:     var(--bg-2);
  --surface: #121c22;
  --raised:  #182530;

  --border:     rgba(170, 215, 230, .09);
  --border-md:  rgba(170, 215, 230, .16);
  --border-str: rgba(170, 215, 230, .28);

  --text:       #e8f1f4;
  --text-2:     #b1c2cb;
  --text-3:     #8ba0ad;
  --text-4:     #5b707c;
  --text2:      var(--text-2);
  --text-sec:   #9db1bc;
  --text-muted: #6d818d;

  --brand:       #2bb8c6;
  --brand-hover: #4fcad6;
  --brand-ink:   #04242a;
  --brand-text:  #5ed2dd;
  --brand-soft:  rgba(43, 184, 198, .14);
  --brand-soft-2:rgba(43, 184, 198, .24);

  --gold:      #f2b53c;
  --gold-soft: rgba(242, 181, 60, .16);
  --gold-text: #f2c45f;

  --accent:     var(--brand);
  --accent-inv: var(--brand-ink);
  --inv:        var(--brand-ink);

  --success:    #4fd08a;
  --success-bg: rgba(79, 208, 138, .13);
  --ok:         var(--success);
  --ok-bg:      var(--success-bg);
  --danger:     #ff7a7a;
  --danger-bg:  rgba(255, 122, 122, .13);
  --err:        var(--danger);
  --err-bg:     var(--danger-bg);
  --info-bg:    var(--bg-2);

  --shadow-sm: 0 1px 3px rgba(0,0,0,.45);
  --shadow-md: 0 4px 20px rgba(0,0,0,.5);
  --shadow-lg: 0 16px 56px rgba(0,0,0,.65);
  --shadow-xl: 0 32px 80px rgba(0,0,0,.8);
  --sm: var(--shadow-sm);
  --md: var(--shadow-md);
  --lg: var(--shadow-lg);

  --pin-fill: var(--brand);
  --pin-bg:   #223440;
  --pill-active-bg:   var(--brand);
  --pill-active-text: var(--brand-ink);
}

/* ═════════ БАЗА ═════════ */
html, body, button, input, select, textarea {
  font-family: var(--font);
}
body {
  font-feature-settings: 'tnum' 0, 'kern' 1;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--brand-soft-2); color: var(--text); }

/* Видимый фокус с клавиатуры — везде */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
input:focus-visible, textarea:focus-visible, select:focus-visible { outline-offset: 0; }

/* Курсив в заголовках больше не нужен: у Onest нет курсива,
   браузер бы имитировал наклон и получилось бы некрасиво */
em, i.serif { font-style: normal; }

/* Пользователь просит меньше анимации — уважаем */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Цифры в статистике и времени выравниваем по ширине */
.stat-n, .stat-num, .num, #tz-badge, .pts, time { font-variant-numeric: tabular-nums; }

/* ── Категории: одна переменная --c на элемент, остальное считается ── */
[data-cat="music"]  { --c: var(--cat-music); }
[data-cat="sport"]  { --c: var(--cat-sport); }
[data-cat="art"]    { --c: var(--cat-art); }
[data-cat="tech"]   { --c: var(--cat-tech); }
[data-cat="food"]   { --c: var(--cat-food); }
[data-cat="nature"] { --c: var(--cat-nature); }
[data-cat="social"] { --c: var(--cat-social); }
[data-cat="other"]  { --c: var(--cat-other); }
[data-cat=""]       { --c: var(--brand); }
[data-cat] {
  --c-soft: color-mix(in srgb, var(--c) 13%, var(--bg));
  --c-ink:  color-mix(in srgb, var(--c) 58%, var(--text));
}