/* Темы SkinFormula: токены дизайн-системы (макеты design/, ds/skinformula/tokens.json).
   Светлая и тёмная; какая включена, решает тема Telegram (colorScheme),
   в браузере — системная. Атрибут data-theme ставит приложение.js на <html>.
   Цвета, отступы и скругления экранов берутся только отсюда. */

:root, [data-theme="light"] {
  --bg: #f6f5fa; --surface: #ffffff; --ink: #1c1b29; --ink-muted: #615e73;
  --line: #e8e6f0; --line-strong: #8c88a0;
  --accent: #4f4acb; --accent-soft: #eceaff; --on-accent: #ffffff; --focus: var(--accent);
  --neutral-badge: #f1f0f5; --neutral-badge-ink: #5a5770;
  --price: #1c1b29; --price-best: #f1f0f5; --price-best-ink: #5a5770;
  --store: #efeef4; --store-ink: #3f3c52;
  --wash-peach: #fdebd8; --wash-butter: #fbf4d2; --wash-lilac: #e6e4fb;
  --v-strong: #06190d; --v-strong-soft: #43996e;
  --v-support: #1f5a37; --v-support-soft: #d3eedd;
  --v-weak: #565e52; --v-weak-soft: #eceee7;
  --v-none: #5c5e6f; --v-none-soft: #eeeef3;
  --v-caution: #80500a; --v-caution-soft: #fdebd3;
  --v-no: #a12d27; --v-no-soft: #fdf0ee;
  --axis-track: #ecebf2; --axis-oil: #f2cd66; --axis-sens: #f0a58c; --axis-pigm: #cfa682;
  --axis-wrink: #9cc1ea; --axis-barrier: #8ccfaa; --axis-mark: var(--ink);
  --portrait: #f6e0d4; --care: #fbf1d3;
  --doctor: var(--v-caution); --doctor-soft: var(--v-caution-soft);
  --role-cleanse: #dcebf7; --role-active: #f6dfe9; --role-hydrate: #d6efe7; --role-protect: #f4edc6;
  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #16151d; --surface: #211f2b; --ink: #efedf7; --ink-muted: #aba8be;
  --line: #34313f; --line-strong: #77738a;
  --accent: #b9b6ff; --accent-soft: #2e2b55; --on-accent: #1a1840; --focus: var(--accent);
  --neutral-badge: #2b2936; --neutral-badge-ink: #b3b0c6;
  --price: #efedf7; --price-best: #2b2936; --price-best-ink: #b3b0c6;
  --store: #2e2c39; --store-ink: #d9d6ea;
  --wash-peach: #2b2229; --wash-butter: #29271f; --wash-lilac: #24223d;
  --v-strong: #08200f; --v-strong-soft: #6cc497;
  --v-support: #b4e0c3; --v-support-soft: #213a2b;
  --v-weak: #bcc2b8; --v-weak-soft: #282b27;
  --v-none: #b3b4c6; --v-none-soft: #26262f;
  --v-caution: #f3c878; --v-caution-soft: #362b17;
  --v-no: #ffa49b; --v-no-soft: #3b2020;
  --axis-track: #302e3b; --axis-oil: #c7a548; --axis-sens: #d4876f; --axis-pigm: #a9845f;
  --axis-wrink: #6f97c4; --axis-barrier: #5fae86; --axis-mark: var(--ink);
  --portrait: #3a2c33; --care: #2c2919;
  --doctor: var(--v-caution); --doctor-soft: var(--v-caution-soft);
  --role-cleanse: #22323f; --role-active: #3a2532; --role-hydrate: #1f3630; --role-protect: #34301b;
  color-scheme: dark;
}

:root {
  --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-24: 24px;
  --radius-20: 20px; --radius-12: 12px; --radius-pill: 999px;
  --tap-min: 44px; --main-button-h: 48px;
  --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, "Segoe UI", system-ui, sans-serif;

  /* Прежние экраны (формула, проверка, загрузка) берут те же токены:
     одна палитра на всё приложение, сиреневый только на действиях */
  --фон: var(--bg);
  --текст: var(--ink);
  --второстепенный: var(--ink-muted);
  --кнопка: var(--accent);
  --текст-кнопки: var(--on-accent);
  --подложка: var(--line);
  --опасно: var(--v-no);
  --внимание: var(--v-caution);
  --хорошо: var(--v-support);
}

/* Движение выключено у тех, кто просил систему его не показывать */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition: none !important; scroll-behavior: auto !important; }
}