/* Токены оформления. Основа — система токенов vMarket (styles.css + prefs.css), свой акцент:
   фиолетово-синий из семейства акцентов vMarket («cyberpunk»). Тема ставится атрибутом
   data-theme на <html> (js/prefs.js) до загрузки React. */
:root {
  --accent: #6c5ce7;
  --accent-2: #8a7bff;
  --accent-soft: rgba(108, 92, 231, 0.12);
  --accent-glow: rgba(108, 92, 231, 0.26);
  --on-accent: #ffffff;

  --text: #0f1115;
  --text-soft: #5b5f6b;
  --text-mute: #8d919c;
  --bg-body: #eceef4;
  --bg-app: #f6f7fb;
  --bg-elev: #ffffff;
  --bg-input: #eff1f6;
  --border: rgba(15, 22, 40, 0.08);
  --border-strong: rgba(15, 22, 40, 0.14);

  --glass-bg: rgba(255, 255, 255, 0.88);
  --glass-bg-strong: rgba(255, 255, 255, 0.96);
  --glass-border: rgba(15, 22, 40, 0.06);
  --glass-inset: rgba(255, 255, 255, 0.9);
  --glass-shadow: 0 1px 2px rgba(15, 25, 45, 0.05), 0 8px 22px rgba(15, 25, 45, 0.07);

  --green: oklch(0.66 0.17 150);
  --green-soft: oklch(0.66 0.17 150 / 0.14);
  --amber: oklch(0.72 0.15 70);
  --amber-soft: oklch(0.77 0.15 75 / 0.18);
  --red: oklch(0.6 0.2 25);
  --red-soft: oklch(0.62 0.2 25 / 0.13);
  --grey-soft: rgba(15, 22, 40, 0.06);

  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  --font-head: "Unbounded", -apple-system, system-ui, sans-serif;
  --font-body: -apple-system, "SF Pro Text", "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --gutter: 16px;
  --tabbar-h: 66px;
  --safe-b: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
  --safe-t: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px));
  color-scheme: light;
}

[data-theme="dark"] {
  --accent: #8676e2;
  --accent-2: #8586ed;
  --accent-soft: rgba(134, 118, 226, 0.16);
  --accent-glow: rgba(134, 118, 226, 0.32);

  --text: #f3f4f7;
  --text-soft: rgba(243, 244, 247, 0.68);
  --text-mute: rgba(243, 244, 247, 0.45);
  --bg-body: #0b0c10;
  --bg-app: #101116;
  --bg-elev: #191a21;
  --bg-input: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);

  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-bg-strong: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-inset: rgba(255, 255, 255, 0.10);
  --glass-shadow: 0 1px 1px rgba(0, 0, 0, 0.4), 0 14px 36px rgba(0, 0, 0, 0.45);

  --green: oklch(0.74 0.16 150);
  --green-soft: oklch(0.74 0.16 150 / 0.16);
  --amber: oklch(0.8 0.14 75);
  --amber-soft: oklch(0.8 0.14 75 / 0.16);
  --red: oklch(0.7 0.18 25);
  --red-soft: oklch(0.7 0.18 25 / 0.16);
  --grey-soft: rgba(255, 255, 255, 0.07);
  color-scheme: dark;
}
/* Тёмная: фон с примесью акцента, как prefs.css vMarket. Без color-mix — нейтральная. */
@supports (color: color-mix(in oklab, red 10%, blue)) {
  [data-theme="dark"] {
    --bg-app: color-mix(in oklab, var(--accent) 7%, #0e0f13);
    --bg-elev: color-mix(in oklab, var(--accent) 9%, #17181e);
  }
}