/* =========================================================================
   «Aeroflot Crew» — дизайн-токены и базовые стили.
   Утилиты Tailwind — в локальном tailwind.css (собирается tools/build.sh).

   Цвет несёт смысл, как на дисплеях кабины (ECAM/PFD):
     accent  (голубой)   — то, что можно нажать или ввести; выбранное
     ok      (зелёный)   — засчитано / положительное: активный налёт, прибавка в ₽
     warn    (янтарный)  — требует внимания: ППЛС 50 %, «проверьте маршрут», запасной
     target  (пурпурный) — цель: следующий порог тарифа
     danger  (красный)   — только удаление и ошибки
   Остальное — нейтральные «чернила» fg / muted / subtle.

   Темы: data-theme="light" | "dark" на <html>; без атрибута — по системе.
   Значения — каналы RGB, чтобы работала прозрачность Tailwind (bg-accent/15).
   Контраст каждого текста ≥ 4.5:1 в обеих темах — проверяет tests/contrast.py.
   ========================================================================= */



/* День — «бумажный OFP»: холодная светлая бумага, чёрные чернила */
:root {
  color-scheme: light;
  --c-canvas: 243 246 249;   /* #EEF1F4 фон страницы */
  --c-surface: 255 255 255;  /* #FFFFFF карточки */
  --c-raised: 247 250 252;   /* #F4F6F8 поля, вложенные блоки */
  --c-line: 223 231 238;     /* #D3DAE1 линии */
  --c-fg: 23 46 62;          /* #101820 основной текст и значения */
  --c-muted: 89 112 126;      /* #4A5764 подписи */
  --c-subtle: 113 132 145;    /* #5F6B78 второстепенное */
  --c-accent: 22 119 136;    /* #0A6A96 */
  --c-ok: 15 107 60;         /* #0F6B3C */
  --c-warn: 138 78 0;        /* #8A4E00 */
  --c-target: 156 42 153;    /* #9C2A99 */
  --c-danger: 185 48 42;     /* #B9302A */
  --c-on-accent: 255 255 255;
  --shadow-card: 0 1px 2px rgb(23 46 62 / 0.06);
}

/* Ночь — «кабина ночью»: глубокий серо-синий, без бликующего насыщенного синего */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --c-canvas: 13 19 26;      /* #0D131A */
    --c-surface: 21 29 39;     /* #151D27 */
    --c-raised: 29 39 51;      /* #1D2733 */
    --c-line: 43 55 69;        /* #2B3745 */
    --c-fg: 232 237 243;       /* #E8EDF3 */
    --c-muted: 163 175 189;    /* #A3AFBD */
    --c-subtle: 135 148 163;   /* #8794A3 */
    --c-accent: 92 200 242;    /* #5CC8F2 */
    --c-ok: 88 214 141;        /* #58D68D */
    --c-warn: 240 178 62;      /* #F0B23E */
    --c-target: 224 123 224;   /* #E07BE0 */
    --c-danger: 242 116 116;   /* #F27474 */
    --c-on-accent: 6 18 26;
    --shadow-card: none;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --c-canvas: 13 19 26;
  --c-surface: 21 29 39;
  --c-raised: 29 39 51;
  --c-line: 43 55 69;
  --c-fg: 232 237 243;
  --c-muted: 163 175 189;
  --c-subtle: 135 148 163;
  --c-accent: 92 200 242;
  --c-ok: 88 214 141;
  --c-warn: 240 178 62;
  --c-target: 224 123 224;
  --c-danger: 242 116 116;
  --c-on-accent: 6 18 26;
  --shadow-card: none;
}

*, ::before, ::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: rgb(var(--c-canvas));
  color: rgb(var(--c-fg));
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-tap-highlight-color: transparent;
  padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
}
input, select, textarea, button { font-family: inherit; font-variant-numeric: tabular-nums; }
button { cursor: pointer; }
input::placeholder, textarea::placeholder { color: rgb(var(--c-subtle)); opacity: 1; }

/* Цифровые «индикаторы»: налёт, деньги — единственный акцентный шрифт */
.readout { font-family: 'Tektur', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

.card { background: rgb(var(--c-surface)); border: 1px solid rgb(var(--c-line)); box-shadow: var(--shadow-card); }

.glass-nav {
  background: rgb(var(--c-surface) / 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Шкала порогов на главной карточке */
.meter { position: relative; height: 10px; border-radius: 9999px; background: rgb(var(--c-raised)); box-shadow: inset 0 0 0 1px rgb(var(--c-line)); }
.meter > .fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: rgb(var(--c-ok)); }
.meter > .tick { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: rgb(var(--c-line)); }
.meter > .tick.passed { background: rgb(var(--c-surface)); }
.meter > .tick.next { background: rgb(var(--c-target)); width: 3px; margin-left: -1.5px; }

/* Раскрывающиеся блоки без JS: стрелка вместо треугольника браузера */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details > summary .chev { transition: transform .15s ease; }
details[open] > summary .chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { details > summary .chev { transition: none; } }

/* Иконки SVG наследуют цвет текста */
.ico { width: 1.15em; height: 1.15em; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-thumb { background: rgb(var(--c-line)); border-radius: 9999px; }

/* Безопасные зоны (чёлка / индикатор «Домой» на iOS в режиме standalone) */
header.glass-nav { padding-top: calc(0.5rem + env(safe-area-inset-top, 0px)); }
nav.glass-nav { padding-bottom: calc(0.25rem + env(safe-area-inset-bottom, 0px)); }
#updateBanner { bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); }

:focus-visible { outline: 2px solid rgb(var(--c-accent)); outline-offset: 2px; }

/* «Целевой маркер» следующего порога — как пурпурный bug скорости на PFD */
.meter > .bug { position: absolute; top: -9px; width: 0; height: 0; margin-left: -6px;
  border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 7px solid rgb(var(--c-target)); }