/* PORTRAIT — палитра. Больше здесь ничего нет и быть не должно.

   Три состояния, а не два. Системная настройка — состояние по умолчанию, и
   тогда на <html> не стоит ничего. Явный выбор ставит data-theme, и он обязан
   побеждать систему в обе стороны: тёмная система при выбранной светлой теме
   отсекается через :not, тёмный выбор при светлой системе — отдельным блоком.
   Значения в тёмных блоках одинаковы и меняются только вместе. */

:root{
  --paper:#F7F3EA;        /* бумага, фон страницы */
  --ink:#12203F;          /* основной текст */
  --accent:#9A5433;       /* акцент: цифры, кнопки, активные элементы */
  --accent-text:#8A4A2C;  /* тот же акцент, затемнён до контраста в тексте */
  --mute:#6E6055;         /* второстепенный текст */
  --line:#DCD1BC;         /* линейки и рамки */
  --wash:#EDE6D8;         /* подложка врезок */
  --on-accent:#F5F0E6;    /* текст поверх акцента */

  /* Рамка сайта. Не краски, но стандарт того же ранга: одно значение на
     витрину, внутренние и правовые страницы.
       --frame  внешняя ширина колонны, по ней меряются обе прилипалки;
       --gutter воздух от края рамки (и от края окна на узком) до текста.
     Границы текста = --frame минус два --gutter; направляющие по cmd+G
     показывают именно их. */
  --frame:1060px;
  --gutter:24px;

  /* Тёмная полоса: шапка и липкая строка. Инвертируется отдельно от страницы,
     поэтому набор свой. */
  --band-bg:#0B1733;
  --band-fg:#F5F0E6;
  --band-accent:#D98A5C;
  --band-mute:rgba(245,240,230,.68);
  --band-line:rgba(245,240,230,.20);

  /* Не зависят от темы. Шапка остаётся тёмно-синей всегда — это опора бренда. */
  --white:#F5F0E6;
  --black:#0B1733;
  --brandbar:#0B1733;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#14120F;
    --ink:#F0E9DD;
    --accent:#D98A5C;       /* поднят на пару ступеней: тот же на чёрном садится */
    --accent-text:#E09B70;
    --mute:#9C9086;
    --line:#302A24;
    --wash:#1E1A16;
    --on-accent:#14120F;    /* акцент светлеет, значит текст на нём темнеет */

    --band-bg:#DCD1BC;
    --band-fg:#12203F;
    --band-accent:#7A4126;
    --band-mute:#5A5049;
    --band-line:rgba(18,32,63,.22);
  }
}

:root[data-theme="dark"]{
  --paper:#14120F;
  --ink:#F0E9DD;
  --accent:#D98A5C;
  --accent-text:#E09B70;
  --mute:#9C9086;
  --line:#302A24;
  --wash:#1E1A16;
  --on-accent:#14120F;

  --band-bg:#DCD1BC;
  --band-fg:#12203F;
  --band-accent:#7A4126;
  --band-mute:#5A5049;
  --band-line:rgba(18,32,63,.22);
}