/**
  rules of:

- color palette
- size?? variables

 */
:root{
    /* color palette */
    --color200: #000000FF;
    --color100: #FFFFFFFF;
    --color1: #4F46E5FF;
    --color2: #6366F1FF;
    --color3: #E2E8F0FF;
    --color4: #0000001E;
    --color5: #00000060;
    --color6: #1E293BFF;
    --color7: #DC2626FF;
    --color8: #64748BFF;
    --color9: #F1F5F9FF;
    --color10: #94A3B8FF;
    --color11: #FFFFFF14;
    --color12: #0000000A;
    --color13: #000000DD;
    --color14: #94A3B81E;
    --color15: #F8FAFCFF;
    --color16: #2DD4BFFF;
    --color17: #C7D2FEFF;
    --color18: #312E81FF;
    --color19: #CBD5E1FF;
    --color20: #0F172AFF;
    --color21: #F87171FF;
    --color22: #7F1D1DFF;
    --color23: #F97316FF;
    --color24: #22C55EFF; /* additional chapts colors */
    --color25: #f59e0bFF; /* additional chapts colors */
    --color26: #ef4444FF; /* additional chapts colors */
    --color27: #3B82F6FF; /* additional chapts colors */

    /* Добавлено для конструктора страниц (psc-299). Палитра хранила сами цвета
       статусов, но не их бледные разбавления и не заслонки поверх содержимого —
       из-за этого модули красили такие места литералами. */
    --color28: #FEF2F2FF; /* бледная подложка предупреждения */
    --color29: #F0FDF4FF; /* бледная подложка успеха */
    --color30: #FEF3C7FF; /* бледная подложка подсказки */
    --color31: #92400EFF; /* тёмная янтарная надпись на подложке подсказки */
    --color32: #0F172A73; /* графит 45% — заслонка поверх содержимого */
    --color33: #0F172AD1; /* графит 82% — заслонка при просмотре во весь экран */
    --color34: #FFFFFF33; /* белое 20% — граница фурнитуры на тёмном */
    --color35: #FFFFFF4D; /* белое 30% — та же фурнитура под курсором */

    /* color settings */
    /* backgrounds */
    /* Акцент: графит вместо индиго.
       Все хроматические оттенки палитры уже заняты смыслом (ошибка, успех,
       внимание, подсветка), поэтому шестой оттенок «для акцента» конкурировал
       бы с ними. Свободен только графит --color20.
       Принцип: цвет означает состояние, графит означает действие и «вы здесь». */
    --primary-background-color: var(--color20);
    --primary-light-background-color: var(--color3);
    --accent-background-color: var(--color6);
    --accent-light-background-color: var(--color19);
    --warn-background-color: var(--color7);
    --warn-light-background-color: var(--color21);
    --basic-background-color: var(--color3);
    --disabled-background-color: var(--color4);
    --disabled2-background-color: var(--color5);
    --content-background-color: var(--color100);
    --content2-background-color: var(--color9);
    --content3-background-color: var(--color15);
    --hover-background-color: var(--color11);
    --hover2-background-color: var(--color12);
    --hover3-background-color: var(--color14);
    --highlight-background-color: var(--color16);
    --warn-wash-background-color: var(--color28);
    --green-wash-background-color: var(--color29);
    --gold-wash-background-color: var(--color30);
    --veil-background-color: var(--color32);
    --veil-strong-background-color: var(--color33);
    --on-dark-border-color: var(--color34);
    --on-dark-hover-background-color: var(--color35);

    /* text colors */
    --primary-text-color: var(--color6);
    --primary-light-text-color: var(--color18);
    --accent-text-color: var(--color20);
    --accent-light-text-color: var(--color20);
    --disabled-text-color: var(--color5);
    --content-text-color: var(--color200);
    --white-text-color: var(--color100);
    --icon-color: var(--color8);
    --icon2-color: var(--color10);
    --icon3-color: var(--color3);
    --secondary-text-color: var(--color8);
    --dropdown-text-color: var(--color13);
    --warn-text-color: var(--color7);
    --warn-light-text-color: var(--color22);
    --gold-text-color: var(--color23);
    --highlight-text-color: var(--color16);
    --green-text-color: var(--color24);
    --yellow-text-color: var(--color25);
    --red-text-color: var(--color26);
    --blue-text-color: var(--color27);
    --gold-dark-text-color: var(--color31);
    --on-dark-text-color: var(--color19);

    --button-text-color: var(--white-text-color);

    /* header
       Фон шапки был зашит в layout.css градиентом из пяти стопов — самый
       заметный признак эпохи после многослойных теней. Плоский тон из палитры. */
    --header-background-color: var(--color20);

    /* shadows
       Тень остаётся только там, где несёт смысл «плавает над содержимым»:
       модалки, выпадающие списки, результаты поиска. Поверхности (карточки,
       шапка) отделяются волосяной линией, а не тенью. Оттенок берётся из
       палитры (slate --color20), а не чистый чёрный. */
    --shadow-overlay: 0 8px 24px rgba(15, 23, 42, .12);
    --shadow-raised: 0 1px 2px rgba(15, 23, 42, .06);

    /* border colors */
    --control-border-color: var(--color3);
    --control-accent-border-color: var(--color20);
    --content-border-color: var(--color3);
    --fieldblock-warn-border-color: var(--color7);
}