/* Цветовые токены и типографика. Направление A — Violet Dusk.
 *
 * Главная идея прежняя: цвет — это навигация. Плитка направления на
 * третьем слое и среда внутри него красятся из одного набора переменных.
 * Переключение направления меняет --accent и --surface на корне, и весь
 * интерфейс переодевается целиком. JS ничего об этом знать не должен.
 *
 * Что изменилось против шестнадцатой версии. Раньше основа была
 * нейтрально-тёмной (#0b0a10), а карточка — плоской заливкой чуть
 * светлее фона. Здесь основа баклажановая, а карточка поднимается над
 * ней не рамкой, а светом изнутри: слабый блик в левом верхнем углу
 * плюс почти прозрачная белая заливка. На тёмном это читается как
 * объём, тогда как рамка читается как таблица.
 *
 * Чернила не серые, а кремовые и розовые. Серый текст на фиолетовом
 * выглядит грязным — он тянет фон в зелёное. Розовый той же семьи, что
 * и фон, поэтому вторичный текст задаётся его прозрачностью, а не
 * отдельными цветами: тогда он ложится на любую палитру направления
 * без правок.
 */

:root {
  /* Основа. Баклажан вместо нейтрального угля. */
  --bg:            #100b14;
  --bg-raised:     #191122;
  /* Линии той же розовой семьи, что и чернила, а не отдельный серый:
     на баклажановом фоне серая линейка выглядит грязной. Обе уходят и
     в border-шорткаты, и в background у дорожек прогресса, поэтому
     остаются плоскими цветами. */
  --line:          rgba(250, 216, 206, .16);
  --line-soft:     rgba(250, 216, 206, .10);

  /* Карточка — свет, а не заливка. Используется только как background,
     поэтому может быть градиентом. */
  --card:
    radial-gradient(120% 100% at 6% -10%, rgba(250, 216, 206, .09) 0%, transparent 58%),
    rgba(255, 255, 255, .035);
  --card-hover:
    radial-gradient(120% 100% at 6% -10%, rgba(250, 216, 206, .13) 0%, transparent 58%),
    rgba(255, 255, 255, .06);

  /* Чернила: крем основной, розовый — всё вторичное. */
  --text:          #f8f4e9;
  --text-dim:      rgba(250, 216, 206, .55);
  --text-faint:    rgba(250, 216, 206, .40);

  /* Палитра Violet Dusk из пинов */
  --violet-deep:   #602d58;
  --violet-mid:    #935d73;
  --rose:          #fad8ce;
  --cream:         #f8f4e9;

  /* Активное направление. Значения подставляет JS при входе в домен.
     Это плоские цвета: --accent идёт не только в фон, но и в color и в
     border-color, где градиент не работает. */
  --accent:        #b07ac2;
  --accent-soft:   rgba(157, 93, 180, .20);
  --surface:       transparent;
  /* Затемнение рабочей области поверх --surface (см. .workspace).
     Пусто по умолчанию; направление задаёт своё. */
  --surface-shade: transparent;
  --on-accent:     #120d16;

  /* Смысловые цвета. Приглушены под пастельную палитру: чистый
     светофорный зелёный на баклажановом кричит. */
  --plus:          #9ed49c;
  --minus:         #e79a9a;
  --warn:          #dcb87e;

  /* Приглушённые подложки под теми же смыслами: фон кнопки удаления,
     плашка предупреждения. Раньше они были вписаны прямо в экранах
     значениями старой палитры и при перекраске остались бы от неё —
     цвет текста уехал бы, а подложка нет. */
  --plus-soft:     rgba(158, 212, 156, .14);
  --minus-soft:    rgba(231, 154, 154, .14);
  --warn-soft:     rgba(220, 184, 126, .14);

  /* Вода. Свой цвет, а не --accent: вода остаётся синей и в
     фиолетовом питании, иначе шкала теряет смысл. */
  --water:         #8ec3e0;

  /* Нижний бар на телефоне — стекло.
     Прозрачности много: сквозь панель должно быть видно, что страница
     под ней продолжается. Читаемость держится не плотностью, а
     размытием, поэтому цвет здесь светлее, чем кажется нужным. */
  --bar:           rgba(38, 28, 52, .58);

  /* Из чего собрано стекло: кромка по краю, световая линия сверху,
     подложка активной вкладки и тень, которая отрывает панель от
     страницы. Отдельными токенами — чтобы в монохромном направлении
     стекло стало нейтральным одной правкой, а не пятью. */
  --glass-edge:    rgba(255, 255, 255, .14);
  --glass-light:   rgba(255, 255, 255, .10);
  --glass-pill:    rgba(255, 255, 255, .13);
  --glass-shadow:  0 12px 32px -12px rgba(0, 0, 0, .7);

  /* Заставка: свет из центра, там, где знак. Кольцо набрано двумя
     цветами семьи — баклажан и розовый. */
  --splash-bg: radial-gradient(circle at 50% 40%, #2a1830 0%, #100b14 68%);
  --ring-1:    var(--rose);
  --ring-2:    var(--violet-mid);

  /* Геометрия. Скругления крупнее, чем были: мягкая плитка — часть
     направления, а не случайность. */
  --r-sm:  11px;
  --r-md:  16px;
  --r-lg:  22px;
  --r-xl:  28px;

  --gap-xs: 6px;
  --gap-sm: 10px;
  --gap:    16px;
  --gap-lg: 24px;
  --gap-xl: 36px;

  /* Глубина держится на трёх вещах сразу, и ни одна из них не светится:
   *
   *   1. карточка светлее фона — это отделяет её от подложки;
   *   2. тень под ней уходит вниз и затемняет, а не подсвечивает;
   *   3. волосяная светлая линия по верхней кромке — там, где на
   *      физическом предмете лежал бы свет сверху.
   *
   * Третий пункт — 6% белого, ровно на грани заметности. Больше — и
   * карточка начинает светиться, а это ровно то, от чего уходили. */
  --shadow:      0 20px 44px -24px rgba(0, 0, 0, .85);
  --shadow-soft: 0 10px 26px -14px rgba(0, 0, 0, .6);
  --edge:        inset 0 1px 0 rgba(255, 255, 255, .06);
  --glow:        0 10px 26px -14px var(--accent);

  /* Пятна света над рабочей областью.
   *
   * Раньше они были вписаны прямо в layout.css плоскими цветами, и
   * фиолетовое свечение доставалось всем разделам без разбора — включая
   * финансы, где вся затея с монохромом им и перечёркивалась. Теперь это
   * переменные, и раздел меняет их вместе с остальной палитрой. */
  --air-1: rgba(96, 45, 88, .55);
  --air-2: rgba(250, 216, 206, .05);

  --sidebar-w: 248px;
  --tabbar-h: 68px;

  --ease: cubic-bezier(.22, .68, .36, 1);

  /* Для длинных движений: переезд подложки, смена экрана, листание
     колоды. Разгоняется медленнее и дольше тормозит — на расстоянии в
     полэкрана обычная кривая читается как рывок. */
  --ease-soft: cubic-bezier(.32, .72, .24, 1);

  --font: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-num: "SF Mono", "JetBrains Mono", ui-monospace, monospace;

  color-scheme: dark;
}

/* ======================================================================
   Прихожая — чёрная
   ======================================================================

   Заставка и выбор направления. Всё, что до входа в направление.

   Чистый чёрный, а не баклажановый, как внутри: прихожая — это пауза
   между экранами, и ей нечего показывать, кроме двух дверей. На чёрном
   фиолетовая плитка горит единственным цветным пятном, и выбор делается
   раньше, чем человек успевает прочитать подписи.

   У чёрного есть цена: угольная плитка «Личных данных» на нём почти
   сливается с фоном. Поэтому у неё заметнее рамка — она и держит форму
   там, где не держит цвет.

   Признак ставит JS: атрибут держится, пока направление не выбрано, и
   снимается на входе в него. В index.html он проставлен заранее, чтобы
   заставка не мигнула баклажановым до первой строчки кода.
   ====================================================================== */

[data-shell="dark"] {
  /* Основа почти чёрная — свет кладётся поверх неё пятнами (см. .app в
     layout.css). Не абсолютный ноль: чистый чёрный на OLED-экране
     проваливается в выключенный пиксель, и низ экрана выглядит дырой, а
     не поверхностью, на которой лежат плитки. */
  --bg:          #0e0b12;
  --bg-raised:   #191420;

  --line:        rgba(255, 255, 255, .14);
  --line-soft:   rgba(255, 255, 255, .07);

  --card:        rgba(255, 255, 255, .05);
  --card-hover:  rgba(255, 255, 255, .08);

  /* Фиолетовый свет сверху.
   *
   * Пятна крупные и заметные: прихожая — единственный экран без
   * содержимого, спорить свету здесь не с чем, и именно он делает вход
   * похожим на вход, а не на пустой чёрный лист. Вниз всё уходит в почти
   * чёрное, поэтому под плитками фон снова спокойный. */
  --air-1: rgba(139, 92, 246, .78);
  --air-2: rgba(167, 139, 250, .24);

  /* Тень на тёмном почти не видна; форму объектам задаёт кромка. */
  --shadow:      none;
  --shadow-soft: none;
  --glow:        none;

  /* Заставка — то же свечение из центра, где стоит знак. */
  --splash-bg: radial-gradient(circle at 50% 42%, #2f1c4d 0%, #0e0b12 66%);
}

/* Палитры направлений. Держатся здесь, но настоящий источник — сервер:
 * он отдаёт их вместе с деревом навигации, а эти значения нужны, чтобы
 * приложение выглядело правильно ещё до первого ответа.
 *
 * --surface здесь градиент, а не цвет: он единственный, кто рисует
 * атмосферу направления, и плоской заливкой её не получить. Он уходит
 * только в background, так что градиент безопасен. */

/* Спорт — фиолетово-чёрная среда.
 *
 * Почти чёрный фон с фиолетовым подтоном и один цвет на всё
 * направление. Раньше здесь было три пятна света и по своему оттенку у
 * каждого раздела: питание сиреневое, спорт розовый, тело персиковое.
 * Смотрелось как четыре разных приложения, а переход между вкладками
 * читался как переход в другую программу.
 *
 * Свет остался, но еле заметный: он должен отделять верх экрана от низа,
 * а не рисоваться сам. Заметный градиент на тёмном всегда выигрывает у
 * содержимого — глаз идёт к самому светлому месту, а там ничего нет.
 */
/* Палитры направлений — запасные значения.
 *
 * Настоящий цвет ставит выбор человека: js/themes.js помечает корень
 * атрибутом data-theme, и работает набор из списка ниже. Эти три блока
 * нужны до того, как отработает первая строчка кода, и на случай, если
 * она не отработает вовсе: направление всё равно выглядит собой, а не
 * общим баклажановым.
 *
 * --surface здесь запасной: настоящий приходит с деревом навигации
 * (backend/navigation/service.py).
 */

[data-domain="sport"] {
  --accent:      #a78bfa;
  --accent-soft: rgba(139, 92, 246, .22);

  /* Фон заметно фиолетовее прежнего почти-чёрного.
     Раньше это был #0b0810 — фиолет в нём читался только рядом с
     сиреневой кнопкой, а сам по себе выглядел серым углём. Здесь цвет
     виден и без подсказок, но остаётся тёмным: на экранах этого
     направления живут цифры, графики и списки, а они держатся на
     контрасте с фоном, а не на его яркости. */
  --bg:          #1c0f33;
  --bg-raised:   #291645;

  /* Тот же свет, что в прихожей, — чтобы вход и среда за ним были одним
     местом, а не двумя разными экранами. Слабее: подложка сама по себе
     светлая, и прежняя сила давала вверху выцветшее пятно вместо
     света. */
  --air-1: rgba(167, 139, 250, .24);
  --air-2: rgba(196, 181, 253, .09);

  /* Внутри темнее, чем на плитке: та же подложка, притушенная на
     четверть. Плитка обещает цвет, среда даёт его же, но не слепит —
     на ней читают. */
  --surface-shade: rgba(8, 3, 16, .26);

  /* Карточка — ровная заливка, как в финансах: разница между разделами
     держится на цвете подложки, а не на разной физике поверхностей.
     Здесь она затемняет, а не осветляет: фон стал светлым фиолетовым, и
     белая плёнка поверх него давала мутное молоко вместо карточки. */
  --card:        rgba(12, 4, 24, .34);
  --card-hover:  rgba(12, 4, 24, .46);

  /* Подложка под светом — своя у каждого раздела, приходит из дерева
     навигации (см. backend/navigation/service.py). Здесь запасное
     значение на случай, если раздел её не задал. */
  --surface:     #251044;

  --line:        rgba(226, 214, 245, .15);
  --line-soft:   rgba(226, 214, 245, .08);

  --text-dim:    rgba(238, 232, 248, .60);
  --text-faint:  rgba(238, 232, 248, .40);

  /* Стекло в тон среде: под баром проезжает фиолетовое, и нейтральное
     стекло поверх него выглядело бы серым пятном. */
  --bar:         rgba(58, 34, 88, .52);
  --glass-pill:  rgba(255, 255, 255, .16);
}

/* Здоровье — зелёная среда: питание, вода, анализы. */
[data-domain="health"] {
  --accent:        #8EB69B;
  --accent-soft:   rgba(142, 182, 155, .22);
  --on-accent:     #051F20;

  --bg:            #0B2B26;
  --bg-raised:     #163832;
  --surface:       #163832;
  --surface-shade: rgba(3, 16, 14, .28);

  --air-1:         rgba(142, 182, 155, .28);
  --air-2:         rgba(218, 241, 222, .08);

  --card:          rgba(3, 18, 16, .36);
  --card-hover:    rgba(3, 18, 16, .48);
  --line:          rgba(218, 241, 222, .15);
  --line-soft:     rgba(218, 241, 222, .08);

  --text:          #DAF1DE;
  --text-dim:      rgba(218, 241, 222, .62);
  --text-faint:    rgba(218, 241, 222, .42);

  --bar:           rgba(22, 56, 50, .55);
  --glass-pill:    rgba(218, 241, 222, .14);

  --plus:          #9be0b0;
  --minus:         #f0a3a3;
}

[data-domain="pim"] {
  --accent:      #eceaee;
  --accent-soft: rgba(255, 255, 255, .10);
  --on-accent:   #0c0c0e;

  /* Света нет вовсе.
   *
   * Свечение — приём цветных разделов: там оно задаёт настроение. На
   * деньгах настроение не нужно, а размытые пятна за карточками читаются
   * как неон и тянут взгляд туда, где ничего не написано. Поэтому здесь
   * плоские поверхности и ни одного ореола. */
  --air-1: transparent;
  --air-2: transparent;

  --bg:          #0a0a0c;
  --bg-raised:   #141416;

  --line:        rgba(255, 255, 255, .12);
  --line-soft:   rgba(255, 255, 255, .07);

  --text-dim:    rgba(240, 240, 245, .58);
  --text-faint:  rgba(240, 240, 245, .38);

  /* Карточка — ровная матовая заливка. Ни градиента, ни блика: карточка
     здесь отделяется от фона тем, что чуть светлее, и всё. */
  --card:        rgba(255, 255, 255, .058);
  --card-hover:  rgba(255, 255, 255, .085);

  /* Подложка — один плоский цвет. */
  --surface:     #0c0c0e;

  /* Плюс и минус остаются цветными, но приглушённее: на нейтральном
     фоне тот же зелёный звучит громче, чем на баклажановом. */
  --plus:        #8fc98d;
  --minus:       #dd8f8f;
  --plus-soft:   rgba(143, 201, 141, .13);
  --minus-soft:  rgba(221, 143, 143, .13);

  /* Свечения нет: белая кнопка на угольном и так заметна. Тени есть —
     они затемняют, а не подсвечивают, и именно они дают карточке вес. */
  --glow:        none;

  /* Стекло тоже нейтральное: фиолетовое под монохромным экраном
     читалось как обрезок чужого интерфейса. */
  --bar:         rgba(38, 38, 44, .58);
  --glass-edge:  rgba(255, 255, 255, .16);
  --glass-pill:  rgba(255, 255, 255, .14);
}

[data-domain="community"] {
  --accent:        #7FDBD6;
  --accent-soft:   rgba(61, 168, 175, .24);
  --on-accent:     #052a2c;

  --bg:            #0b3033;
  --bg-raised:     #144a4e;
  --surface:       #175F63;
  --surface-shade: rgba(2, 20, 22, .26);

  --air-1:         rgba(61, 168, 175, .36);
  --air-2:         rgba(180, 232, 228, .10);

  --card:          rgba(2, 20, 22, .34);
  --card-hover:    rgba(2, 20, 22, .46);
  --line:          rgba(180, 232, 228, .16);
  --line-soft:     rgba(180, 232, 228, .08);

  --text:          #e6fbf9;
  --text-dim:      rgba(230, 251, 249, .62);
  --text-faint:    rgba(230, 251, 249, .42);

  --bar:           rgba(20, 74, 78, .55);
  --glass-pill:    rgba(180, 232, 228, .14);

  /* Приход не бирюзовый — он бы сливался с кнопками; тёплый зелёный
     и коралл читаются на лагуне как чужие, а значит заметные. */
  --plus:          #b7e59a;
  --minus:         #ffab9b;
}

/* ======================================================================
   Девять наборов цвета
   ======================================================================

   Любой из девяти можно поставить любому направлению: три семейства
   цвета были задуманы как характер направлений, но характер — вещь
   человека, а не приложения. Поэтому наборы лежат общим списком, а
   направление задаёт лишь тот, что стоит по умолчанию (см. DEFAULTS в
   js/themes.js).

   Каждый блок задаёт весь набор токенов целиком, а не разницу с
   направлением: набор из «Личных данных», поставленный в «Тело и
   здоровье», не должен донашивать чужой фон. Из-за этого блоки
   выглядят повторяющимися — это цена за то, что любой из них работает
   в любом месте.

   Веса селекторов равны весу блока направления, поэтому наборы стоят
   ниже: при равном весе выигрывает тот, кто написан последним.
   ====================================================================== */

/* Аметист: фиолетовая среда и сиреневый акцент. По умолчанию
 * в «Теле и здоровье». */
[data-theme="amethyst"] {
  --accent:        #a78bfa;
  --accent-soft:   rgba(139, 92, 246, .22);
  --on-accent:     #120d16;

  --bg:            #1c0f33;
  --bg-raised:     #291645;
  --surface:       #251044;
  --surface-shade: rgba(8, 3, 16, .26);

  --air-1:         rgba(167, 139, 250, .24);
  --air-2:         rgba(196, 181, 253, .09);

  --card:          rgba(12, 4, 24, .34);
  --card-hover:    rgba(12, 4, 24, .46);
  --line:          rgba(226, 214, 245, .15);
  --line-soft:     rgba(226, 214, 245, .08);

  --text:          #f8f4e9;
  --text-dim:      rgba(238, 232, 248, .60);
  --text-faint:    rgba(238, 232, 248, .40);

  --bar:           rgba(58, 34, 88, .52);
  --glass-pill:    rgba(255, 255, 255, .16);
  --glass-edge:    rgba(255, 255, 255, .14);

  --plus:          #9ed49c;
  --minus:         #e79a9a;
  --plus-soft:     rgba(158, 212, 156, .14);
  --minus-soft:    rgba(231, 154, 154, .14);
  --glow:          0 10px 26px -14px var(--accent);
}

/* Лес: глубокая ель и шалфейный акцент. Самый спокойный набор. */
[data-theme="forest"] {
  --accent:        #8EB69B;
  --accent-soft:   rgba(142, 182, 155, .22);
  --on-accent:     #051F20;

  --bg:            #0B2B26;
  --bg-raised:     #163832;
  --surface:       #163832;
  --surface-shade: rgba(3, 16, 14, .28);

  --air-1:         rgba(142, 182, 155, .28);
  --air-2:         rgba(218, 241, 222, .08);

  --card:          rgba(3, 18, 16, .36);
  --card-hover:    rgba(3, 18, 16, .48);
  --line:          rgba(218, 241, 222, .15);
  --line-soft:     rgba(218, 241, 222, .08);

  --text:          #DAF1DE;
  --text-dim:      rgba(218, 241, 222, .62);
  --text-faint:    rgba(218, 241, 222, .42);

  --bar:           rgba(22, 56, 50, .55);
  --glass-pill:    rgba(218, 241, 222, .14);

  /* Зелёный акцента и зелёный «прихода» — разные: приход светлее и
     холоднее, чтобы не сливаться с кнопками. */
  --plus:          #9be0b0;
  --minus:         #f0a3a3;
  /* Дополнено до полного набора: раньше эти токены доставались от
     направления, а теперь набор выбирают в любом из трёх. */
  --on-accent:     #051F20;
  --plus-soft:     rgba(155, 224, 176, .14);
  --minus-soft:    rgba(240, 163, 163, .14);
  --glow:          0 10px 26px -14px var(--accent);
  --glass-edge:    rgba(218, 241, 222, .16);
}

/* Пион: единственный светлый набор. Чернила тёмные, карточки белые,
 * стекло бара — молочное; затемнять рабочую область нечем и незачем. */
[data-theme="peony"] {
  color-scheme: light;

  --accent:        #AD1457;
  --accent-soft:   rgba(173, 20, 87, .14);
  --on-accent:     #ffffff;

  --bg:            #FCE4EC;
  --bg-raised:     #ffffff;
  --surface:       #F8D7E1;
  --surface-shade: transparent;

  --air-1:         rgba(173, 20, 87, .20);
  --air-2:         rgba(255, 255, 255, .55);

  --card:          rgba(255, 255, 255, .74);
  --card-hover:    rgba(255, 255, 255, .92);
  --line:          rgba(173, 20, 87, .18);
  --line-soft:     rgba(173, 20, 87, .10);

  --text:          #5a0a30;
  --text-dim:      rgba(90, 10, 48, .66);
  --text-faint:    rgba(90, 10, 48, .46);

  --bar:           rgba(255, 255, 255, .62);
  --glass-pill:    rgba(173, 20, 87, .12);
  --glass-edge:    rgba(173, 20, 87, .22);
  --glass-light:   rgba(255, 255, 255, .90);
  --glass-shadow:  0 12px 32px -12px rgba(173, 20, 87, .35);

  --edge:          none;
  --shadow-soft:   0 10px 24px -16px rgba(173, 20, 87, .28);

  /* Поле на светлом не утапливается чёрным, а лежит белым листом. */
  --field:         rgba(255, 255, 255, .85);
  --field-line:    rgba(173, 20, 87, .22);

  --plus:          #2e8b57;
  --minus:         #c62828;
  --warn:          #b8741a;
  --plus-soft:     rgba(46, 139, 87, .12);
  --minus-soft:    rgba(198, 40, 40, .12);
  --glow:          0 10px 26px -14px var(--accent);
}

/* Монохром: угольная подложка, почти белый акцент, ни одного
 * свечения. По умолчанию в «Личных данных»: на экране балансов и так
 * три цвета со смыслом — плюс, минус и ноль, — и четвёртый,
 * декоративный, спорит с ними. */
[data-theme="mono"] {
  --accent:        #eceaee;
  --accent-soft:   rgba(255, 255, 255, .10);
  --on-accent:     #0c0c0e;

  --bg:            #0a0a0c;
  --bg-raised:     #141416;
  --surface:       #0c0c0e;
  --surface-shade: transparent;

  /* Света нет вовсе: размытые пятна за карточками читаются как неон и
     тянут взгляд туда, где ничего не написано. */
  --air-1:         transparent;
  --air-2:         transparent;

  --card:          rgba(255, 255, 255, .058);
  --card-hover:    rgba(255, 255, 255, .085);
  --line:          rgba(255, 255, 255, .12);
  --line-soft:     rgba(255, 255, 255, .07);

  --text:          #f8f4e9;
  --text-dim:      rgba(240, 240, 245, .58);
  --text-faint:    rgba(240, 240, 245, .38);

  --bar:           rgba(38, 38, 44, .58);
  --glass-pill:    rgba(255, 255, 255, .14);
  --glass-edge:    rgba(255, 255, 255, .16);

  --plus:          #8fc98d;
  --minus:         #dd8f8f;
  --plus-soft:     rgba(143, 201, 141, .13);
  --minus-soft:    rgba(221, 143, 143, .13);

  /* Белая кнопка на угольном и так заметна. */
  --glow:          none;
}

/* Закат: тёплый шоколад и янтарный акцент. */
[data-theme="sunset"] {
  --accent:        #FBB931;
  --accent-soft:   rgba(248, 143, 34, .22);
  --on-accent:     #2a1408;

  --bg:            #1a100a;
  --bg-raised:     #2a1a10;
  --surface:       #2b1a0f;
  --surface-shade: rgba(10, 4, 0, .22);

  --air-1:         rgba(234, 97, 19, .36);
  --air-2:         rgba(255, 227, 179, .08);

  --card:          rgba(8, 3, 0, .36);
  --card-hover:    rgba(8, 3, 0, .48);
  --line:          rgba(255, 227, 179, .15);
  --line-soft:     rgba(255, 227, 179, .08);

  --text:          #FFE3B3;
  --text-dim:      rgba(255, 227, 179, .62);
  --text-faint:    rgba(255, 227, 179, .42);

  --bar:           rgba(58, 34, 18, .55);
  --glass-pill:    rgba(255, 227, 179, .14);

  --plus:          #b7dd9a;
  --minus:         #f2a08f;
  --plus-soft:     rgba(183, 221, 154, .14);
  --minus-soft:    rgba(242, 160, 143, .14);
  --glow:          0 10px 26px -14px var(--accent);
  --glass-edge:    rgba(255, 227, 179, .16);
}

/* Медуза: глубокий индиго, сиреневый свет сверху, лавандовые чернила. */
[data-theme="jelly"] {
  --accent:        #9d7bff;
  --accent-soft:   rgba(139, 105, 255, .22);
  --on-accent:     #120a2e;

  --bg:            #100a26;
  --bg-raised:     #1a1138;
  --surface:       #1b1140;
  --surface-shade: rgba(6, 2, 20, .24);

  --air-1:         rgba(124, 92, 255, .34);
  --air-2:         rgba(196, 181, 253, .10);

  --card:          rgba(10, 4, 30, .38);
  --card-hover:    rgba(10, 4, 30, .50);
  --line:          rgba(214, 204, 255, .15);
  --line-soft:     rgba(214, 204, 255, .08);

  --text:          #efeaff;
  --text-dim:      rgba(239, 234, 255, .62);
  --text-faint:    rgba(239, 234, 255, .42);

  --bar:           rgba(40, 28, 84, .55);
  --glass-pill:    rgba(214, 204, 255, .14);

  --plus:          #9be0b0;
  --minus:         #f0a3a3;
  --plus-soft:     rgba(155, 224, 176, .14);
  --minus-soft:    rgba(240, 163, 163, .14);
  --glow:          0 10px 26px -14px var(--accent);
  --glass-edge:    rgba(214, 204, 255, .16);
}

/* Лагуна: глубокая морская зелень и светло-бирюзовые кнопки.
 * По умолчанию в «Сообществе». */
[data-theme="lagoon"] {
  --accent:        #7FDBD6;
  --accent-soft:   rgba(61, 168, 175, .24);
  --on-accent:     #052a2c;

  --bg:            #0b3033;
  --bg-raised:     #144a4e;
  --surface:       #175F63;
  --surface-shade: rgba(2, 20, 22, .26);

  --air-1:         rgba(61, 168, 175, .36);
  --air-2:         rgba(180, 232, 228, .10);

  --card:          rgba(2, 20, 22, .34);
  --card-hover:    rgba(2, 20, 22, .46);
  --line:          rgba(180, 232, 228, .16);
  --line-soft:     rgba(180, 232, 228, .08);

  --text:          #e6fbf9;
  --text-dim:      rgba(230, 251, 249, .62);
  --text-faint:    rgba(230, 251, 249, .42);

  --bar:           rgba(20, 74, 78, .55);
  --glass-pill:    rgba(180, 232, 228, .14);
  --glass-edge:    rgba(180, 232, 228, .16);

  /* Приход не бирюзовый — он бы сливался с кнопками. */
  --plus:          #b7e59a;
  --minus:         #ffab9b;
  --plus-soft:     rgba(183, 229, 154, .14);
  --minus-soft:    rgba(255, 171, 155, .14);
  --glow:          0 10px 26px -14px var(--accent);
}

/* Рубин: металлический красный. Алый акцент на бордово-чёрном; минус
 * здесь персиковый, а не красный — в красной среде он бы пропал. */
[data-theme="ruby"] {
  --accent:        #E62629;
  --accent-soft:   rgba(230, 38, 41, .22);
  --on-accent:     #ffffff;

  --bg:            #1c0608;
  --bg-raised:     #33090d;
  --surface:       #4a1014;
  --surface-shade: rgba(14, 0, 2, .26);

  --air-1:         rgba(230, 38, 41, .34);
  --air-2:         rgba(239, 144, 146, .10);

  --card:          rgba(12, 0, 2, .38);
  --card-hover:    rgba(12, 0, 2, .50);
  --line:          rgba(255, 210, 210, .16);
  --line-soft:     rgba(255, 210, 210, .08);

  --text:          #ffecec;
  --text-dim:      rgba(255, 236, 236, .62);
  --text-faint:    rgba(255, 236, 236, .42);

  --bar:           rgba(80, 18, 22, .55);
  --glass-pill:    rgba(255, 210, 210, .14);

  --plus:          #a8e6b0;
  --minus:         #ffc09a;
  --warn:          #ffd27a;
  --plus-soft:     rgba(168, 230, 176, .14);
  --minus-soft:    rgba(255, 192, 154, .14);
  --glow:          0 10px 26px -14px var(--accent);
  --glass-edge:    rgba(255, 210, 210, .16);
}

/* Серебро: светлая сталь на графите. Свет есть — белёсый блик
 * сверху, как на шлифованном металле, — но цвета нет. */
[data-theme="silver"] {
  --accent:        #e2e3e8;
  --accent-soft:   rgba(252, 252, 254, .14);
  --on-accent:     #1b1b1e;

  --bg:            #1b1b1e;
  --bg-raised:     #2b2b30;
  --surface:       #3a3a40;
  --surface-shade: rgba(0, 0, 0, .26);

  --air-1:         rgba(252, 252, 254, .16);
  --air-2:         rgba(205, 206, 210, .08);

  --card:          rgba(0, 0, 0, .30);
  --card-hover:    rgba(0, 0, 0, .42);
  --line:          rgba(252, 252, 254, .16);
  --line-soft:     rgba(252, 252, 254, .08);

  --text:          #f4f4f6;
  --text-dim:      rgba(244, 244, 246, .62);
  --text-faint:    rgba(244, 244, 246, .42);

  --bar:           rgba(60, 60, 66, .58);
  --glass-pill:    rgba(252, 252, 254, .14);

  /* Белая кнопка на графите заметна и без ореола; белое свечение
     читалось бы как засветка. */
  --glow:          none;

  --plus:          #9fd69a;
  --minus:         #e89a9a;
  --plus-soft:     rgba(159, 214, 154, .13);
  --minus-soft:    rgba(232, 154, 154, .13);
  --glass-edge:    rgba(252, 252, 254, .16);
}

* { box-sizing: border-box; }

/* Атрибут hidden сильнее display у классов.
 *
 * По умолчанию наоборот: браузер прячет hidden правилом с нулевым весом,
 * и любое `display: flex` из наших стилей его перебивает. Элемент
 * получает hidden, остаётся на экране, и в коде это выглядит как «строка
 * не сработала». Правило одно на всё приложение — дешевле, чем
 * вспоминать про него у каждого нового класса. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

body {
  transition: background .5s var(--ease);
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--text); }

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: var(--text);
  /* Поле утоплено в подложку, а не поднято над ней: карточка светится,
     поле должно уходить вглубь, иначе они спорят. */
  background: var(--field, rgba(0, 0, 0, .25));
  border: 1px solid var(--field-line, rgba(250, 216, 206, .12));
  border-radius: var(--r-sm);
  padding: 11px 13px;
  width: 100%;
  outline: none;
  transition: border-color .18s var(--ease);
}

input:focus, select:focus, textarea:focus { border-color: var(--accent); }
input::placeholder, textarea::placeholder { color: var(--text-faint); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(250, 216, 206, .14);
  border-radius: 10px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(250, 216, 206, .24); background-clip: padding-box; }

/* Утилиты типографики */
/* Числа во всём приложении.
 *
 * Раньше здесь стоял моноширинный шрифт: он держит колонки сумм ровными,
 * чтобы при обновлении цифры не прыгали. Но у моноширинного каждая
 * цифра сидит в своей широкой ячейке, и на живых числах это читалось как
 * разрядка — «10 000.00» занимало полкарточки, а длинные суммы уезжали
 * на три строки.
 *
 * font-variant-numeric: tabular-nums делает ту же работу без него:
 * цифры одной ширины, но нормальной. Колонки по-прежнему не прыгают. */
.num {
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.dim { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.plus { color: var(--plus); }
.minus { color: var(--minus); }

.h1 { font-size: 28px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.h2 { font-size: 19px; font-weight: 650; letter-spacing: -.01em; margin: 0; }
.h3 { font-size: 15px; font-weight: 600; margin: 0; }
.label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-faint);
}