/* =====================================================================
   Ревизорро — дизайн-токены Mini App.  ЕДИНЫЙ ИСТОЧНИК.
   Этап 2B импортирует этот файл как есть. Любой новый экран/компонент
   берёт значения ТОЛЬКО отсюда — ни одного цветового/размерного литерала
   в компонентах. Нужен новый оттенок — вывести через color-mix() из токена.
   ===================================================================== */

:root{
  /* --- шрифт --- */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter",
          system-ui, "Segoe UI", Roboto, sans-serif;
  /* SF Pro нельзя вшить (лицензия Apple). На iPhone возьмётся системный SF Pro,
     на Android — Inter (грузим с Google Fonts). */
  /* Моноширинный — только для команд и имён внутри текста подсказки (§8.1). */
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* --- шкала отступов (только эти шаги) --- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px;

  /* --- радиусы --- */
  --r-card: 22px;    /* внешняя карточка */
  --r-inner: 14px;   /* элемент внутри карточки */
  --r-chip: 9px;     /* чип / callout */
  --r-pill: 999px;   /* сегменты, кнопки-пилюли */

  /* --- тип-шкала: размер / вес / межбуквенное --- */
  /* Шкала уплотнена 24.09.2026 по решению владельца (было 27/28/16/14/12.5), чтобы на
     экране помещалось больше. Ниже --t-caption (12px) — по-прежнему нельзя. */
  --t-display: 24px; --t-display-w: 700; --t-display-ls: -.02em;  /* заголовок экрана */
  --t-value:   24px; --t-value-w:   700; --t-value-ls:   -.02em;  /* число в плитке */
  --t-banner:  17px; --t-banner-w:  650; --t-banner-ls:  -.01em;  /* крупная строка баннера */
  --t-card:    15px; --t-card-w:    650; --t-card-ls:    -.01em;  /* заголовок карточки */
  --t-body:    13px; --t-body-w:    450;
  --t-label:   12px; --t-label-w:   500;                          /* ярлык плитки, чип, сегмент (muted) */
  --t-caption: 12px; --t-caption-w: 500;                          /* подпись */
  --t-tab:     10.5px; --t-tab-w:   550;

  /* --- движение --- */
  --ease: cubic-bezier(.32,.72,0,1);   /* пружинка в духе iOS */
  --dur-fast: 160ms;
  --dur: 220ms;

  /* --- стекло (рецепт) --- */
  --glass-blur: blur(24px) saturate(1.5);
  --glass-blur-bar: blur(28px) saturate(1.6);   /* шапка / таб-бар — сильнее */
  --shadow: 0 8px 26px -10px rgba(0,0,0,.5);

  /* ================= ТЁМНАЯ (по умолчанию) ================= */
  --bg: #0b1315;
  --bg-grad: linear-gradient(180deg,#0d181c 0%,#0b1214 55%,#0c1013 100%);
  --ink: #f0f4f5;
  --muted: #93a1a7;
  --faint: #6b787e;

  --glass: rgba(255,255,255,.055);
  --glass-strong: rgba(255,255,255,.085);
  --glass-brd: rgba(255,255,255,.10);
  --glass-top: rgba(255,255,255,.16);       /* светлая кромка сверху карточки */

  --accent: #3ad9c9;
  --accent-dim: rgba(58,217,201,.16);
  --accent-ink: #04201d;                    /* текст на акцентной заливке */

  /* цвета состояний — СИСТЕМНЫЕ, отдельно от акцента. Ровно три. */
  --ok:   #34d364;
  --warn: #ff9f0a;
  --crit: #ff4d43;
}

@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg: #e9edef;
    --bg-grad: linear-gradient(180deg,#eef2f3 0%,#e6ebec 60%,#e2e7e9 100%);
    --ink: #141a1c;
    --muted: #5c686d;
    --faint: #8a969b;

    --glass: rgba(255,255,255,.66);
    --glass-strong: rgba(255,255,255,.82);
    --glass-brd: rgba(255,255,255,.9);
    --glass-top: rgba(255,255,255,1);

    --accent: #0a9c90;
    --accent-dim: rgba(10,156,144,.12);
    --accent-ink: #ffffff;

    --ok:   #22a447;
    --warn: #e08600;
    --crit: #df352b;

    --shadow: 0 10px 26px -12px rgba(20,40,45,.22);
  }
}

/* Явный выбор темы (переключатель в приложении) перебивает системную в обе стороны. */
:root[data-theme="light"]{
  --bg:#e9edef; --bg-grad:linear-gradient(180deg,#eef2f3 0%,#e6ebec 60%,#e2e7e9 100%);
  --ink:#141a1c; --muted:#5c686d; --faint:#8a969b;
  --glass:rgba(255,255,255,.66); --glass-strong:rgba(255,255,255,.82);
  --glass-brd:rgba(255,255,255,.9); --glass-top:rgba(255,255,255,1);
  --accent:#0a9c90; --accent-dim:rgba(10,156,144,.12); --accent-ink:#ffffff;
  --ok:#22a447; --warn:#e08600; --crit:#df352b;
  --shadow:0 10px 26px -12px rgba(20,40,45,.22);
}
:root[data-theme="dark"]{
  --bg:#0b1315; --bg-grad:linear-gradient(180deg,#0d181c 0%,#0b1214 55%,#0c1013 100%);
  --ink:#f0f4f5; --muted:#93a1a7; --faint:#6b787e;
  --glass:rgba(255,255,255,.055); --glass-strong:rgba(255,255,255,.085);
  --glass-brd:rgba(255,255,255,.10); --glass-top:rgba(255,255,255,.16);
  --accent:#3ad9c9; --accent-dim:rgba(58,217,201,.16); --accent-ink:#04201d;
  --ok:#34d364; --warn:#ff9f0a; --crit:#ff4d43;
  --shadow:0 8px 26px -10px rgba(0,0,0,.5);
}