/* Токены интерфейса (17.1). Все компоненты собираются только из них. */
:root {
  color-scheme: light dark;

  /* нейтральная шкала */
  --c-bg:        #ffffff;
  --c-bg-sunken: #f6f7f9;
  --c-bg-raised: #ffffff;
  --c-bg-hover:  #f0f2f5;
  --c-line:      #e2e5ea;
  --c-line-soft: #eef0f3;
  --c-text:      #16181d;
  --c-text-dim:  #5a616e;
  --c-text-mute: #868e9c;

  /* единственный акцент — фирменный зелёный RangMera */
  --c-accent:      #099B5F;
  --c-accent-weak: #DDF5E9;
  --c-accent-text: #ffffff;
  --c-accent-hover: #078452;
  /* салатовое свечение под формами входа — тройкой для rgba() */
  --c-glow: 132, 204, 22;

  /* фирменные цвета из брендкита: используются точечно, а не вместо шкалы */
  --c-brand-graphite: #282B2D;
  --c-brand-ink:      #111715;

  /* семантика */
  --c-ok:      #1a7f4b;
  --c-ok-weak: #e6f4ec;
  --c-warn:      #9a6500;
  --c-warn-weak: #fdf3e0;
  --c-bad:      #b3261e;
  --c-bad-weak: #fdecea;
  --c-info-weak: #eef1f6;

  /* Каналы продвижения: восемь цветов каналов на графиках (tone-ch1…8).
     Порядок — это и есть защита от путаницы при нарушениях цветового зрения:
     соседние цвета проверены на различимость (ΔE ≥ 8 при протанопии и
     дейтеранопии, ≥ 19 при обычном зрении). Три светлых (бирюзовый, жёлтый,
     розовый) дают на белом меньше 3:1 — поэтому у каждой полосы подпись
     канала и доли: цвет не единственный признак. Каналов больше восьми
     админка сохранить не даёт (channels_max) */
  --c-ch-1: #2a78d6;
  --c-ch-2: #eb6834;
  --c-ch-3: #1baf7a;
  --c-ch-4: #eda100;
  --c-ch-5: #e87ba4;
  --c-ch-6: #008300;
  --c-ch-7: #4a3aa7;
  --c-ch-8: #e34948;

  /* Полосы позиций на вкладке «Позиции»: зелёный — ТОП-3 и ТОП-10, жёлтый —
     11–20, оранжевый — 21–50, бледный — 51–100, светло-красный — не найден.
     Фон клетки, а не цвет числа: число остаётся цветом текста и читается
     на любой полосе. Цвет не единственный признак — в клетке само число,
     а у «не найден» прочерк */
  --c-pos-1:    #b7e4c7;
  --c-pos-2:    #dcf1e3;
  --c-pos-3:    #fbf0c2;
  --c-pos-4:    #fde0c4;
  --c-pos-5:    #f3e7dc;
  --c-pos-none: #f8dad7;

  /* метки проектов (макет 11-F): шесть цветов меню заказчика. Свои, а не
     --c-ok/--c-bad: метка — пометка владельца, а не «работает / упало» */
  --c-mark-gray:   #8b93a1;
  --c-mark-black:  #16181d;
  --c-mark-red:    #e5484d;
  --c-mark-orange: #f08c2b;
  --c-mark-green:  #2fb67c;
  --c-mark-blue:   #3e8ef7;
  --c-mark-ring:   rgba(0, 0, 0, .18);
  --c-mark-edge:   transparent;

  /* отступы */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;
  --s-4: 16px; --s-6: 24px; --s-8: 32px;

  /* радиусы и тени */
  --r-1: 3px; --r-2: 6px; --r-3: 10px;
  --shadow-1: 0 1px 2px rgba(16, 20, 30, .06), 0 1px 1px rgba(16, 20, 30, .04);
  --shadow-2: 0 4px 16px rgba(16, 20, 30, .10);

  /* типографика */
  --f-text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-num:  ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, monospace;
  --t-12: 12px; --t-13: 13px; --t-14: 14px;
  --t-16: 16px; --t-20: 20px; --t-24: 24px;

  --w-content: 1440px;
  --h-header: 48px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --c-bg:        #14161a;
    --c-bg-sunken: #0f1115;
    --c-bg-raised: #1a1d23;
    --c-bg-hover:  #22262e;
    --c-line:      #2b303a;
    --c-line-soft: #23272f;
    --c-text:      #e8eaee;
    --c-text-dim:  #a3abb8;
    --c-text-mute: #767e8c;

    /* в тёмной теме фирменный зелёный осветляется: на графите #099B5F не читается */
    --c-accent:      #2FD18D;
    --c-accent-weak: #10281F;
    --c-accent-text: #0b0d11;
    --c-accent-hover: #57DCA4;
    --c-glow: 163, 230, 53;

    --c-ok:      #4ec38a;
    --c-ok-weak: #14291f;
    --c-warn:      #e0a94a;
    --c-warn-weak: #2a2417;
    --c-bad:      #f0796f;
    --c-bad-weak: #2c1a19;
    --c-info-weak: #1d2129;

    /* те же восемь каналов, подобранные под тёмный фон: все не ниже 3:1 */
    --c-ch-1: #3987e5;
    --c-ch-2: #d95926;
    --c-ch-3: #199e70;
    --c-ch-4: #c98500;
    --c-ch-5: #d55181;
    --c-ch-6: #008300;
    --c-ch-7: #9085e9;
    --c-ch-8: #e66767;

    /* полосы позиций: те же оттенки, приглушённые под тёмный фон */
    --c-pos-1:    #1f4d34;
    --c-pos-2:    #183527;
    --c-pos-3:    #3f3815;
    --c-pos-4:    #47311a;
    --c-pos-5:    #33291f;
    --c-pos-none: #42201e;

    /* чёрная метка на графите не видна: у кружка — светлое кольцо, у
       полосы — светлая окантовка (--c-mark-edge) */
    --c-mark-black: #05070a;
    --c-mark-ring:  rgba(255, 255, 255, .38);
    --c-mark-edge:  rgba(255, 255, 255, .55);

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-2: 0 4px 16px rgba(0, 0, 0, .5);
  }
}