/* F440 — токены дизайн-системы.
   Источник: «Дизайн-система - F440.dc.html», §01–§05 и §13.
   Тёмная тема основная; светлая — не инверсия, а пересчёт (§03).

   Здесь только значения. Компоненты — в components.css. */

:root {
  /* ── §01 Фоны. Слоёв шесть, седьмого не будет:
        любая новая глубина решается обводкой, а не новым фоном. ── */
  --bg: #0D1B2A;              /* фон приложения */
  --panel: #1B263B;           /* карточки, панели */
  --panel-2: #243352;         /* вложенный слой, чипсы, выбранный сегмент */
  --panel-3: #2F3E46;         /* треки полос, третий слой */
  --stage: #0A1420;           /* фон под приборы */
  --panel-response: #0B1725;  /* колонка ответа, рейл настроек, колонка онбординга */

  --line: #263449;
  --line-2: #3A4C57;

  /* ── §01 Текст. Контраст считается к панели #1B263B: мелкий текст
        почти всегда лежит на ней, а не на фоне. ── */
  --text: #E0E1DD;            /* 13.2:1 на фоне */
  --muted: #98A2AC;           /* 5.9:1 на панели */
  --muted-2: #939DA9;         /* 5.6:1 на панели — нижняя граница, только 10–13 px */
  --muted-3: #A1ACB8;         /* третичный: подписи осей, деления, шорткаты, выключенные кнопки.
                                 6.6:1 панель · 5.5:1 panel-2 · 4.8:1 panel-3 · 8.2:1 stage */

  /* ── §02 Акцент четырьмя ступенями: заливка, графики, обводки и текст
        требуют разной светлоты, иначе либо надписи не читаются, либо
        заливка светится. ── */
  --accent-deep: #14601A;     /* заливка под светлым текстом */
  --accent: #1F7A1F;          /* графики и полосы */
  --accent-hi: #4FA85A;       /* обводки, фокус */
  --accent-ink: #79C97D;      /* текст и иконки акцентом, 7.5:1 */
  --accent-hover: #9FDCA4;    /* наведение, только мышь */
  --switch-on: #1F7A1F;       /* тот же хекс, что accent, но своя роль:
                                 включённый тумблер — постоянно нажатое состояние */

  /* Что лежит НА зелёной заливке. Отдельный токен, а не --text: в тёмной
     теме текст светлый и на deep читается, а в светлой он тёмно-синий —
     на тёмно-зелёном он бы просто пропал. Сюда же шарик включённого
     тумблера и ручка слайдера. */
  --on-accent: #E0E1DD;
  --knob-off: var(--muted);   /* шарик выключенного тумблера */
  --knob-shadow: none;

  /* Состояния сплошной зелёной кнопки. У контурной primary нажатие
     заливку добавляет, у сплошной оно должно читаться как вдавливание —
     поэтому здесь наведение светлеет, а нажатие темнеет. Кольцо фокуса
     своё: обычный accent-hi на зелёном не виден. */
  --solid-hover: #1A7222;
  --solid-hover-line: #2C9A2C;
  --solid-press: #0F4A14;
  --solid-focus: #9FDCA4;

  /* ── §02 Семантика ── */
  --brass: #D9B44A;           /* идёт замер, «почти», предупреждение · 7.6:1 на панели */
  --bad: #C87C68;             /* границы и обводки промаха */
  --bad-ink: #DB9382;         /* текст промаха, 5.4:1 на врезке */

  /* Прозрачные производные — заливки под текстом акцентом и врезки исходов.
     Держим токенами, чтобы rgba не расползались по компонентам литералами. */
  --accent-wash: rgba(121, 201, 125, .14);
  --accent-wash-2: rgba(121, 201, 125, .22);
  --accent-edge: rgba(121, 201, 125, .35);
  --accent-edge-2: rgba(121, 201, 125, .5);
  --brass-wash: rgba(217, 180, 74, .10);
  --brass-edge: rgba(217, 180, 74, .45);
  --bad-wash: rgba(200, 124, 104, .10);
  --bad-edge: rgba(200, 124, 104, .45);
  --bad-edge-2: rgba(200, 124, 104, .5);

  /* «Нет данных» кодируется фактурой, а не приглушённым цветом:
     работает и в монохроме, и при дальтонизме. */
  --hatch-nodata: repeating-linear-gradient(135deg, var(--line-2) 0 4px, var(--panel-2) 4px 8px);
  --hatch-pending: repeating-linear-gradient(135deg, var(--brass) 0 4px, rgba(217, 180, 74, .35) 4px 8px);

  /* ── §04 Типографика ── */
  --font-ui: "Manrope", "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-display: 40px;  --lh-display: 1.1;   --ls-display: -.025em;
  --fs-h1: 28px;       --lh-h1: 1.15;       --ls-h1: -.02em;
  --fs-h2: 20px;       --lh-h2: 1.3;
  --fs-h3: 16px;       --lh-h3: 1.35;
  --fs-body: 15px;     --lh-body: 1.55;
  --fs-small: 13px;    --lh-small: 1.5;
  --fs-label: 11px;    --ls-label: .06em;

  /* ── §05 Отступы 4/8 ── */
  --sp-1: 4px;    /* внутри пилюли, между знаком и словом */
  --sp-2: 8px;    /* между чипсами, кнопками в ряд */
  --sp-3: 12px;   /* внутренний паддинг панелей на мобильном */
  --sp-4: 16px;   /* паддинг панелей, между карточками */
  --sp-6: 24px;   /* между блоками экрана */
  --sp-10: 40px;  /* между секциями профиля и базы */

  /* ── §05 Радиусы ── */
  --r-xs: 8px;      /* мелкое */
  --r-s: 9px;       /* icon-button 32, кнопка внутри error-state */
  --r: 10px;        /* кнопки, поля */
  --r-m: 11px;      /* чипсы, icon-button 44 */
  --r-card: 12px;   /* карточки внутри панелей */
  --r-lg: 14px;     /* панели */
  --r-modal: 16px;  /* модалка */
  --r-phone: 18px;  /* фрейм телефона */
  --r-sheet: 20px;  /* верх bottom sheet */
  --r-pill: 999px;

  /* ── §05 Тени. Иерархия держится границами: на тёмном фоне тень почти
        не читается. Тень только у всплывающего — отделить его от того,
        что прокручивается под ним. Лист поднимается снизу и светит вверх,
        модалка висит и светит вниз. ── */
  --shadow-sheet: 0 -8px 32px rgba(6, 12, 20, .55);
  --shadow-modal: 0 20px 48px rgba(6, 12, 20, .55);
  --shadow-device: 0 24px 64px rgba(6, 12, 20, .6);
  --overlay: rgba(6, 12, 20, .80);

  /* ── §05 Фокус: всегда обводкой, никогда только цветом фона ── */
  --focus-w: 2px;
  --focus-offset: 2px;

  /* ── §05 Размеры ── */
  --tap-min: 48px;      /* минимальная зона нажатия и на web, и в TMA */
  --tap-row: 44px;      /* строка настройки, чипс и icon-button в TMA */
  --rail: 72px;
  --rail-open: 208px;
  --content-max: 920px;

  /* ── §13 Motion. Анимация не задерживает ответ и не соревнуется
        со звуком. Ничто не движется во время прослушивания, кроме
        индикатора воспроизведения. ── */
  --t-press: 120ms;      /* нажатие, чипс, пилюля — ease-out */
  --t-feedback: 150ms;   /* появление разбора: только прозрачность, без сдвига */
  --t-bar: 300ms;        /* полоса уровня — медленно, чтобы сдвиг порога заметили */
  --t-sheet: 220ms;      /* шит и модалка */
  --t-toast: 180ms;      /* вход тоста; живёт 4000 мс */
  --t-rail: 200ms;       /* раскрытие рейла — ширина, не трансформация */
  --t-pulse: 1800ms;     /* «идёт замер» — единственная зацикленная анимация */
  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* ── §03 Светлая тема. Не инверсия, а пересчёт: зелёный #1F7A1F как текст
      даёт 3.2:1 на тёмном и 5.4:1 на белом — та же краска ведёт себя
      противоположно. Поэтому accent-ink и accent разведены по ролям. ── */
:root[data-theme="light"] {
  --bg: #F2F4F0;
  --panel: #FFFFFF;
  --panel-2: #E7EAE4;
  --panel-3: #DADED6;
  /* Порядок фонов от светлого к тёмному здесь другой, чем в тёмной теме:
     panel → bg → panel-response → stage → panel-2 → panel-3. */
  --stage: #E9ECE6;
  --panel-response: #EDF0EA;

  --line: #DDE1D9;
  --line-2: #C3C9BE;

  --text: #1B263B;
  --muted: #4C5A66;
  --muted-2: #5D6873;
  /* Своё значение, а не копия muted-2: этот токен живёт на делениях,
     подписях осей и шорткатах — то есть на panel-3, где #5D6873 давал
     4.17:1. Здесь худший случай 4.6:1. */
  --muted-3: #55606B;

  --accent-deep: #14601A;
  --accent: #1F7A1F;
  --accent-hi: #2E8F38;
  --accent-ink: #145A16;
  --accent-hover: #1F7A1F;
  --switch-on: #145A16;

  --brass: #8A6A12;
  --bad: #8E3D2C;
  --bad-ink: #8E3D2C;

  /* В светлой теме шарик белый с тенью: на светлом треке без неё он
     теряется. То же и для ручки слайдера. */
  --on-accent: #FFFFFF;
  --knob-off: #FFFFFF;
  --knob-shadow: 0 1px 2px rgba(27, 38, 59, .25);

  --accent-wash: rgba(20, 90, 22, .10);
  --accent-wash-2: rgba(20, 90, 22, .16);
  --accent-edge: rgba(20, 90, 22, .35);
  --accent-edge-2: rgba(20, 90, 22, .5);
  --brass-wash: rgba(138, 106, 18, .10);
  --brass-edge: rgba(138, 106, 18, .45);
  --bad-wash: rgba(142, 61, 44, .08);
  --bad-edge: rgba(142, 61, 44, .40);
  --bad-edge-2: rgba(142, 61, 44, .5);

  --shadow-sheet: 0 -8px 32px rgba(27, 38, 59, .18);
  --shadow-modal: 0 20px 48px rgba(27, 38, 59, .18);
  --shadow-device: 0 24px 64px rgba(27, 38, 59, .22);
  --overlay: rgba(27, 38, 59, .45);
}

/* Тёмная — по умолчанию и всегда: аудиолюди сидят в тёмных редакторах,
   переход в светлое окно между DAW и тренажёром сбивает адаптацию глаза.
   Системное предпочтение учитывается, только если человек не выбрал сам. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) {
    color-scheme: light;
  }
}

/* §13: при prefers-reduced-motion все длительности сводятся к нулю,
   зацикленный пульс останавливается, состояния остаются различимыми
   по фактуре и подписи. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-press: 1ms; --t-feedback: 1ms; --t-bar: 1ms;
    --t-sheet: 1ms; --t-toast: 1ms; --t-rail: 1ms;
  }
}