/* ==========================================================================
   ИАП АИК — тема «Цветная». Основа — светлые токены (tokens.css), сверху — цвета разделов,
   цветные баннеры и акценты. Файл подключён всегда, но действует только при data-theme="colorful".
   Цвет раздела — идентичность раздела (плитки, карточки, шапки), а не данные: палитры графиков не меняются.
   Пары соседних цветов проверены на различимость при дальтонизме; раздел дополнительно
   обозначен значком, номером и названием.
   ========================================================================== */

:root[data-theme="colorful"] {
  --sec-I: #00927F;   /* I   общие климатические показатели */
  --sec-II: #1F6FD1;  /* II  водное хозяйство */
  --sec-III: #1B7340; /* III лесное хозяйство и биоразнообразие */
  --sec-IV: #7A5AC8;  /* IV  промышленность и строительство */
  --sec-V: #B07400;   /* V   сельское хозяйство */
  --sec-VI: #C23E7A;  /* VI  транспорт и инфраструктура */
  --sec-VII: #D9620F; /* VII энергетика */
  --hero-a: #0B7A70; --hero-b: #1F6FD1; --hero-c: #5B47C6;
  --hero-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 120 L0 78 C80 70 120 40 190 46 C250 51 280 22 340 18 C400 14 430 52 500 50 C560 48 600 12 670 10 C740 8 770 44 840 46 C900 48 940 26 1010 28 C1080 30 1130 56 1200 52 L1200 120Z' fill='%23ffffff' fill-opacity='.07'/%3E%3Cpath d='M0 120 L0 100 C90 92 140 70 220 74 C300 78 340 96 420 92 C500 88 540 62 620 64 C700 66 750 92 830 90 C910 88 960 70 1040 72 C1110 74 1160 90 1200 88 L1200 120Z' fill='%23ffffff' fill-opacity='.08'/%3E%3C/svg%3E");
  --bg: #EEF3F8;
  --line: #E1E8EF;
  --shadow-1: 0 1px 2px rgba(16, 24, 40, .05), 0 6px 20px rgba(16, 24, 40, .05);
}
:root[data-theme="colorful"] [data-sec] { --sec: var(--accent); --sec-ink: color-mix(in srgb, var(--sec) 78%, #000); }
:root[data-theme="colorful"] [data-sec="I"] { --sec: var(--sec-I); }
:root[data-theme="colorful"] [data-sec="II"] { --sec: var(--sec-II); }
:root[data-theme="colorful"] [data-sec="III"] { --sec: var(--sec-III); }
:root[data-theme="colorful"] [data-sec="IV"] { --sec: var(--sec-IV); }
:root[data-theme="colorful"] [data-sec="V"] { --sec: var(--sec-V); }
:root[data-theme="colorful"] [data-sec="VI"] { --sec: var(--sec-VI); }
:root[data-theme="colorful"] [data-sec="VII"] { --sec: var(--sec-VII); }

:root[data-theme="colorful"] body {
  background:
    radial-gradient(1100px 420px at 0% -8%, rgba(31, 111, 209, .10), transparent 60%),
    radial-gradient(900px 380px at 100% 0%, rgba(0, 146, 127, .10), transparent 60%),
    var(--bg);
}

/* ---------- шапка: полоса цветов семи разделов ---------- */
:root[data-theme="colorful"] .topbar { box-shadow: 0 1px 0 var(--line); }
:root[data-theme="colorful"] .topbar::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg,
    var(--sec-I) 0 14.28%, var(--sec-II) 14.28% 28.57%, var(--sec-III) 28.57% 42.85%, var(--sec-IV) 42.85% 57.14%,
    var(--sec-V) 57.14% 71.42%, var(--sec-VI) 71.42% 85.71%, var(--sec-VII) 85.71% 100%);
}
:root[data-theme="colorful"] .brand-mark { background: linear-gradient(135deg, var(--hero-a), var(--hero-b)); color: #fff; }
:root[data-theme="colorful"] .nav-link.is-active { background: var(--accent-soft); color: var(--accent); }
:root[data-theme="colorful"] .menu-item[data-sec] .menu-ico { background: var(--sec); color: #fff; }

/* ---------- шапка страницы: цветной баннер (на страницах раздела и показателя — цвет раздела) ---------- */
:root[data-theme="colorful"] .page-head {
  position: relative; overflow: hidden; color: #fff;
  padding: var(--sp-8) var(--sp-8) var(--sp-6); border-radius: 16px;
  background: var(--hero-art) left bottom / 100% 46% no-repeat, linear-gradient(120deg, var(--hero-a) 0%, var(--hero-b) 58%, var(--hero-c) 100%);
  box-shadow: 0 14px 34px rgba(31, 111, 209, .22);
}
:root[data-theme="colorful"] .page-head[data-sec] {
  background: var(--hero-art) left bottom / 100% 46% no-repeat,
    linear-gradient(120deg, color-mix(in srgb, var(--sec) 70%, #000) 0%, color-mix(in srgb, var(--sec) 84%, #000) 60%, color-mix(in srgb, var(--sec) 72%, #2B2463) 100%);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--sec) 26%, transparent);
}
:root[data-theme="colorful"] .page-head .overline,
:root[data-theme="colorful"] .page-head .muted-label { color: rgba(255, 255, 255, .80); }
:root[data-theme="colorful"] .page-head h1,
:root[data-theme="colorful"] .page-head .code-lg { color: #fff; }
:root[data-theme="colorful"] .page-head .lede,
:root[data-theme="colorful"] .page-head .body-2 { color: rgba(255, 255, 255, .92); }
:root[data-theme="colorful"] .page-head .badge { background: rgba(255, 255, 255, .92); }
:root[data-theme="colorful"] .page-head .sector-ico { background: rgba(255, 255, 255, .18); color: #fff; }
:root[data-theme="colorful"] .page-head .head-stats { gap: var(--sp-3); }
:root[data-theme="colorful"] .page-head .head-stat {
  min-width: 120px; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28);
}
:root[data-theme="colorful"] .page-head .head-stat dt { color: rgba(255, 255, 255, .82); }
:root[data-theme="colorful"] .page-head .head-stat dd,
:root[data-theme="colorful"] .page-head .head-stat dd b { color: #fff; }
:root[data-theme="colorful"] .page-head .head-stat dd b { font-size: var(--fs-28); line-height: var(--lh-28); }
:root[data-theme="colorful"] .page-head .meter { background: rgba(255, 255, 255, .25); }
:root[data-theme="colorful"] .page-head .meter > span { background: #7FF0DC; }
:root[data-theme="colorful"] .page-head .btn { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .40); color: #fff; }
:root[data-theme="colorful"] .page-head .btn:hover { background: rgba(255, 255, 255, .24); color: #fff; }
:root[data-theme="colorful"] .page-head .btn-primary { background: #fff; border-color: #fff; color: var(--accent); }
:root[data-theme="colorful"] .page-head .btn-primary:hover { background: rgba(255, 255, 255, .88); color: var(--accent); }

/* ---------- фильтры, переключатели, вкладки ---------- */
:root[data-theme="colorful"] .filters { background: var(--panel); box-shadow: var(--shadow-1); }
:root[data-theme="colorful"] .seg button[aria-pressed="true"],
:root[data-theme="colorful"] .seg button[aria-selected="true"] { background: var(--accent); color: #fff; box-shadow: none; }
:root[data-theme="colorful"] .tabs [role="tab"][aria-selected="true"] { color: var(--accent); }

/* ---------- карточки ---------- */
:root[data-theme="colorful"] .card-main,
:root[data-theme="colorful"] .card.combo { overflow: hidden; }
:root[data-theme="colorful"] .card-main::before,
:root[data-theme="colorful"] .card.combo::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--hero-a), var(--hero-b), var(--hero-c));
}
:root[data-theme="colorful"] .bento .card .overline { color: var(--accent); }
:root[data-theme="colorful"] .group-row th { background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }

/* карточка показателя: цвет раздела — полоса сверху, код, линия динамики */
:root[data-theme="colorful"] .kpi {
  --spark: var(--sec); overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--sec) 7%, var(--panel)) 0%, var(--panel) 60%);
  border-color: color-mix(in srgb, var(--sec) 18%, var(--line));
}
:root[data-theme="colorful"] .kpi::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--sec); }
:root[data-theme="colorful"] .kpi .code { color: var(--sec-ink); background: color-mix(in srgb, var(--sec) 12%, transparent); padding: 2px 6px; border-radius: var(--r-sm); }
:root[data-theme="colorful"] .kpi .spark-line { stroke-width: 2; }
:root[data-theme="colorful"] .kpi .spark-dot { fill: var(--sec); }
:root[data-theme="colorful"] .kpi .spark-dot.hollow { fill: var(--panel); stroke: var(--sec); }

/* плитки разделов */
:root[data-theme="colorful"] .sector-tile[data-sec] {
  --spark: var(--sec); position: relative; overflow: hidden;
  background: linear-gradient(165deg, color-mix(in srgb, var(--sec) 11%, var(--panel)) 0%, var(--panel) 62%);
  border-color: color-mix(in srgb, var(--sec) 24%, var(--line));
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
:root[data-theme="colorful"] .sector-tile[data-sec]::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--sec); }
:root[data-theme="colorful"] .sector-tile[data-sec] .sector-ico { background: var(--sec); color: #fff; width: 36px; height: 36px; }
:root[data-theme="colorful"] .sector-tile[data-sec] .code { color: var(--sec-ink); font-size: var(--fs-14); }
:root[data-theme="colorful"] .sector-tile[data-sec] .meter { background: color-mix(in srgb, var(--sec) 16%, transparent); height: 6px; }
:root[data-theme="colorful"] .sector-tile[data-sec] .meter > span { background: var(--sec); }
:root[data-theme="colorful"] .sector-tile[data-sec] .spark-dot { fill: var(--sec); }
:root[data-theme="colorful"] .sector-tile[data-sec]:hover {
  border-color: var(--sec); transform: translateY(-2px); box-shadow: 0 10px 24px color-mix(in srgb, var(--sec) 22%, transparent);
  background: linear-gradient(165deg, color-mix(in srgb, var(--sec) 15%, var(--panel)) 0%, var(--panel) 62%);
}
:root[data-theme="colorful"] .sector-tile-all,
:root[data-theme="colorful"] .sector-tile-all:hover { background: linear-gradient(135deg, var(--hero-a), var(--hero-b) 70%, var(--hero-c)); border: 0; color: #fff; }
:root[data-theme="colorful"] .sector-tile-all h3,
:root[data-theme="colorful"] .sector-tile-all .lede,
:root[data-theme="colorful"] .sector-tile-all .link-more { color: #fff; }
:root[data-theme="colorful"] .sector-tile-all .sector-ico { background: rgba(255, 255, 255, .18); color: #fff; }

/* заголовки секций — цветной маркер */
:root[data-theme="colorful"] .section-head h2 { display: flex; align-items: center; gap: var(--sp-3); }
:root[data-theme="colorful"] .section-head h2::before { content: ""; width: 6px; height: 22px; border-radius: 3px; background: linear-gradient(180deg, var(--hero-a), var(--hero-b)); }

/* структура и происхождение данных: шкалы в цвете меток источников */
:root[data-theme="colorful"] .stack-track { height: 18px; }
:root[data-theme="colorful"] .stack-seg:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
:root[data-theme="colorful"] .source-list .meter { height: 8px; }
:root[data-theme="colorful"] .source-list li:nth-child(1) .meter > span { background: var(--good); }
:root[data-theme="colorful"] .source-list li:nth-child(2) .meter,
:root[data-theme="colorful"] .source-list li:nth-child(3) .meter { background: var(--warn-soft); }
:root[data-theme="colorful"] .source-list li:nth-child(2) .meter > span,
:root[data-theme="colorful"] .source-list li:nth-child(3) .meter > span { background: var(--warn); }
:root[data-theme="colorful"] .source-list li:nth-child(4) .meter > span {
  background: repeating-linear-gradient(135deg, var(--ink-3) 0 4px, color-mix(in srgb, var(--ink-3) 35%, transparent) 4px 8px);
}

/* подвал — тёмная цветная полоса */
:root[data-theme="colorful"] .footer { border-top: 0; background: linear-gradient(90deg, #0B3B3A, #13325F 60%, #2B2463); margin-top: var(--sp-8); }
:root[data-theme="colorful"] .footer-in { color: rgba(255, 255, 255, .78); }
:root[data-theme="colorful"] .footer-links a { color: #8FEBDD; }

@media (max-width: 640px) {
  :root[data-theme="colorful"] .page-head { padding: var(--sp-5); border-radius: var(--r-lg); }
  :root[data-theme="colorful"] .page-head .head-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
  :root[data-theme="colorful"] .page-head .head-stats:has(> .head-stat:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root[data-theme="colorful"] .page-head .head-stat { min-width: 0; padding: var(--sp-2) var(--sp-3); }
  :root[data-theme="colorful"] .page-head .head-stat dd b { font-size: var(--fs-20); line-height: var(--lh-20); }
}