/* Decision OS — токены «2030» · v3: тёмная (по умолчанию) + светлая [data-theme="light"]
   Экраны используют только эти переменные. Светлая тема = другой блок значений, экраны не меняются. */
:root{
  /* Поверхности */
  --bg:#05070A;
  --surface:#0B0E13;
  --on-accent:#05070A;
  --glass:rgba(14,17,22,.7);
  --glass-strong:rgba(9,12,16,.88);

  /* Текст */
  --text-hi:#FFFFFF;
  --text-1:#F4F6F8;
  --text-2:#AEB6C2;
  --text-3:#8A93A2;
  --text-dim:#4B5361;

  /* Нейтральные слои (белый с прозрачностью) */
  --w-1:rgba(255,255,255,.04);
  --w-2:rgba(255,255,255,.07);
  --w-3:rgba(255,255,255,.13);
  --w-4:rgba(255,255,255,.25);
  --w-5:rgba(255,255,255,.5);

  /* Сущности: основной · подложка · мягкий · линия · свечение */
  --advice:#6FC7BC; --advice-deep:#3E9C91;
  --advice-tint:rgba(111,199,188,.08); --advice-soft:rgba(111,199,188,.16); --advice-line:rgba(111,199,188,.32); --advice-glow:rgba(111,199,188,.6);
  --human:#8CA8E0; --human-hi:#B3C6EE; --human-lo:#7491D2;
  --human-tint:rgba(140,168,224,.08); --human-soft:rgba(140,168,224,.16); --human-line:rgba(140,168,224,.4); --human-glow:rgba(140,168,224,.6);
  --fact:#DBC07E;
  --fact-tint:rgba(219,192,126,.08); --fact-soft:rgba(219,192,126,.16); --fact-line:rgba(219,192,126,.32); --fact-glow:rgba(219,192,126,.6);
  --artifact:#C7CCD4;
  --artifact-tint:rgba(199,204,212,.08); --artifact-soft:rgba(199,204,212,.16); --artifact-line:rgba(199,204,212,.32); --artifact-glow:rgba(199,204,212,.5);
  --danger:#EE8E8E;
  --danger-tint:rgba(238,142,142,.08); --danger-soft:rgba(238,142,142,.16); --danger-line:rgba(238,142,142,.35); --danger-glow:rgba(238,142,142,.6);

  /* Кнопка-акцент (нейтральная) */
  --btn-hi:#FFFFFF; --btn-lo:#DDE2E8;

  /* Шрифты */
  --font:Geist,Inter,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,Menlo,monospace;

  /* Иерархия (одна на все экраны)
     L1 Заголовок экрана — «где я»: --fs-xl, --fw-bold, --text-hi. Один на экран.
     L2 Ответ экрана — ради чего пришли (совет на карте, «Ваш ход» на главной): --fs-2xl, --fw-bold, цвет сущности.
        Исключение: заголовок главной/лендинга — --fs-3xl. Больше нигде.
     L3 Метка панели: --mono, --fs-xs, --fw-semi, --ls-caps, --text-2 (или цвет сущности, если панель — сущность).
     L4 Утверждение: довод, обоснование, вопрос — --fs-md (довод --fw-semi, обоснование --fw-reg).
     L5 Текст и кнопки: --fs-sm. Кнопки --fw-semi.
     L6 Мета: время, id, источник, подсказки — --fs-xs, --text-3 (данные — --mono).
     Числа в карточках — --fs-xl. --fs-2xl только для L2. --fs-lg — заголовок длинной страницы (словарь, правила). */
  /* Размеры — 7 шагов */
  --fs-xs:13px;   /* подписи, метки, моно */
  --fs-sm:15px;   /* основной текст, кнопки */
  --fs-md:19px;   /* доводы, обоснование, заголовок раздела */
  --fs-lg:28px;   /* заголовок блока страницы */
  --fs-xl:44px;   /* заголовок экрана, числа в карточках */
  --fs-2xl:72px;  /* ключевые цифры */
  --fs-3xl:112px; /* главный акцент экрана */

  /* Толщины — 3 */
  --fw-reg:400; --fw-semi:600; --fw-bold:700;

  /* Межстрочный и трекинг */
  --lh-display:.95; --lh-snug:1.4; --lh-body:1.55;
  --ls-display:-0.05em; --ls-tight:-0.015em; --ls-caps:.1em;

  /* Скругления — 3 + круг */
  --r-sm:12px;    /* чипы, мелкие карточки, поля */
  --r-md:20px;    /* панели */
  --r-full:999px; /* кнопки, метки, полосы */

  /* Отступы — сетка 4 */
  --sp-4:4px; --sp-8:8px; --sp-12:12px; --sp-16:16px; --sp-20:20px; --sp-24:24px;
  --sp-32:32px; --sp-40:40px; --sp-48:48px; --sp-64:64px; --sp-96:96px;

  /* Тени */
  --shadow-panel:inset 0 1px 0 var(--w-1),inset 0 -1px 0 rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.25),0 12px 32px -8px rgba(0,0,0,.5),0 40px 80px -20px rgba(0,0,0,.7);
  --shadow-float:0 14px 30px -18px rgba(0,0,0,.9);
  /* Блик панели */
  --sheen:rgba(255,255,255,.035);
  --sheen-line:rgba(255,255,255,.22);
  /* Глубокая тень под плавающим (поле ввода) */
  --shade:rgba(0,0,0,.9);
}

/* Светлая тема. Те же имена, другие значения. Контраст текста к --bg / --surface (WCAG):
   text-1 16.1 · text-2 7.5 · text-3 4.8 · advice 5.2 · human 5.9 · fact 5.3 · artifact 6.2 · danger 5.1.
   --text-dim (2.4) — только неактивное и декоративное, не для чтения. */
[data-theme="light"]{
  --bg:#F5F6F8;
  --surface:#FFFFFF;
  --on-accent:#FFFFFF;
  --glass:rgba(255,255,255,.72);
  --glass-strong:rgba(255,255,255,.9);

  --text-hi:#0A0D12;
  --text-1:#161A21;
  --text-2:#475061;
  --text-3:#656D7B;
  --text-dim:#9AA1AC;

  --w-1:rgba(10,13,18,.03);
  --w-2:rgba(10,13,18,.07);
  --w-3:rgba(10,13,18,.12);
  --w-4:rgba(10,13,18,.22);
  --w-5:rgba(10,13,18,.45);

  --advice:#0F7468; --advice-deep:#0B5A51;
  --advice-tint:rgba(15,116,104,.06); --advice-soft:rgba(15,116,104,.12); --advice-line:rgba(15,116,104,.3); --advice-glow:rgba(15,116,104,.28);
  --human:#3A5BAE; --human-hi:#5675C2; --human-lo:#2F4C96;
  --human-tint:rgba(58,91,174,.06); --human-soft:rgba(58,91,174,.12); --human-line:rgba(58,91,174,.35); --human-glow:rgba(58,91,174,.3);
  --fact:#80620E;
  --fact-tint:rgba(128,98,14,.06); --fact-soft:rgba(128,98,14,.12); --fact-line:rgba(128,98,14,.3); --fact-glow:rgba(128,98,14,.28);
  --artifact:#545C69;
  --artifact-tint:rgba(84,92,105,.06); --artifact-soft:rgba(84,92,105,.12); --artifact-line:rgba(84,92,105,.3); --artifact-glow:rgba(84,92,105,.25);
  --danger:#BB3B39;
  --danger-tint:rgba(187,59,57,.06); --danger-soft:rgba(187,59,57,.12); --danger-line:rgba(187,59,57,.32); --danger-glow:rgba(187,59,57,.28);

  --btn-hi:#2A303A; --btn-lo:#0A0D12;

  --shadow-panel:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(10,13,18,.05),0 8px 24px -10px rgba(10,13,18,.10),0 24px 48px -24px rgba(10,13,18,.10);
  --shadow-float:0 14px 30px -18px rgba(10,13,18,.25);
  --sheen:rgba(255,255,255,0);
  --sheen-line:rgba(255,255,255,0);
  --shade:rgba(10,13,18,.14);
}

body{margin:0;background:var(--bg);color:var(--text-1);font-family:var(--font);font-size:var(--fs-sm);line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
a{color:var(--text-1)}a:hover{color:var(--text-hi)}
button,input,textarea{font-family:inherit}

/* Панель с глубиной */
.pnl{position:relative;border-radius:var(--r-md);background:linear-gradient(180deg,var(--sheen),transparent 35%),var(--surface);border:1px solid var(--w-2);box-shadow:var(--shadow-panel)}
.pnl::before{content:"";position:absolute;top:0;left:18%;right:18%;height:1px;background:linear-gradient(90deg,transparent,var(--sheen-line),transparent);pointer-events:none}

/* Движение */
@keyframes flow{from{stroke-dashoffset:0}to{stroke-dashoffset:-40}}
@keyframes ring{0%{transform:scale(1);opacity:.45}100%{transform:scale(2.6);opacity:0}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes breathe{0%,100%{box-shadow:0 0 22px var(--advice-glow)}50%{box-shadow:0 0 40px var(--advice)}}
@keyframes breathe-human{0%,100%{box-shadow:0 0 22px var(--human-glow)}50%{box-shadow:0 0 44px var(--human)}}
@keyframes glow{0%,100%{opacity:.55}50%{opacity:1}}
.flow{animation:flow 2.4s linear infinite}
.pulse{position:relative}
.pulse::after{content:"";position:absolute;inset:-3px;border-radius:50%;background:currentColor;animation:ring 2s ease-out infinite}
.caret{animation:blink 1s step-end infinite}
.breathe{animation:breathe 3s ease-in-out infinite}
.breathe-human{animation:breathe-human 3s ease-in-out infinite}
.glow{animation:glow 3s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}