/*
 * Токены сайта ambassador.my. Все цвета сайта живут здесь; styles.css берёт их только через var().
 * Нейтральные — шкала Radix «sage», бренд — шкала Radix «grass»: #46a758 — цвет значка продукта, он же у
 * галочек и акцентов. Белый текст на #46a758 — около 3:1, ниже AA, поэтому фон основной кнопки — --button
 * #2a7e3b (белый на нём ≈ 5:1), наведение — #23692f; так же в тёмной теме. Мелкий текст бренда — --brand-text.
 * Тема — системная, только CSS: светлая на :root, тёмная под @media (prefers-color-scheme: dark).
 */

:root {
  color-scheme: light;

  --bg: #fbfdfc;
  --bg-subtle: #f4f7f5;
  --surface: #ffffff;
  --border: #dfe2e0;
  --border-strong: #cbcfcd;
  --text: #1a211e;
  --text-muted: #5f6563;

  --brand: #46a758;
  --brand-hover: #3e9b4f;
  --brand-text: #2a7e3b;
  --brand-soft: #e9f6e9;
  --brand-contrast: #ffffff;
  --button: #2a7e3b;
  --button-hover: #23692f;
  --button-text: #ffffff;
  --focus: #2a7e3b;

  --tg-bg: #e6ebee;
  --tg-bubble: #ffffff;
  --tg-key: #f0f4f1;
  --closing: #e9f6e9;

  --shadow-small: 0 1px 2px rgb(26 33 30 / 0.06);
  --shadow: 0 1px 2px rgb(26 33 30 / 0.05), 0 16px 40px rgb(26 33 30 / 0.10);

  --font-sans: 'Onest', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --max: 1200px;
  --speed: 160ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --bg: #101211;
    --bg-subtle: #171918;
    --surface: #202221;
    --border: #2e3130;
    --border-strong: #444947;
    --text: #eceeed;
    --text-muted: #adb5b2;

    --brand: #46a758;
    --brand-hover: #53b365;
    --brand-text: #71d083;
    --brand-soft: #1b2a1e;
    --brand-contrast: #ffffff;
    --button: #2a7e3b;
    --button-hover: #23692f;
    --button-text: #ffffff;
    --focus: #71d083;

    --tg-bg: #17212b;
    --tg-bubble: #202b36;
    --tg-key: #2b3945;
    --closing: #1b2a1e;

    --shadow-small: 0 1px 2px rgb(0 0 0 / 0.25);
    --shadow: 0 1px 2px rgb(0 0 0 / 0.25), 0 16px 40px rgb(0 0 0 / 0.30);
  }
}