/* ============================================================
   Magnitoland — design tokens
   Нейтральная «бизнес»-палитра (10.06.2026): светлая — белое с серым,
   тёмная — почти чёрное с глянцем. Главный акцент (primary) — графит
   (в тёмной — почти белый): строгий монохром-вид. Красный — только для
   деструктивных/важных действий (error). Функциональные success/error
   сохранены. Отдельные акцентные цвета кнопок — в glass.css (--accent-*).
   Все переменные начинаются с --ml-*, чтобы не конфликтовать
   с --tg-theme-* от Telegram и с чужими библиотеками.
   ============================================================ */

:root {
  /* -------- цвета: светлая тема (белое с серым, графитовый акцент) -------- */
  --ml-primary:              #1F1F1F;
  --ml-on-primary:           #FFFFFF;
  --ml-primary-container:    #EDEDED;
  --ml-on-primary-container: #2A2A2A;

  --ml-secondary:              #5F5F5F;
  --ml-on-secondary:           #FFFFFF;
  --ml-secondary-container:    #E8E8E8;
  --ml-on-secondary-container: #2A2A2A;

  --ml-tertiary:              #5F5F5F;
  --ml-on-tertiary:           #FFFFFF;
  --ml-tertiary-container:    #F1F1F1;
  --ml-on-tertiary-container: #2A2A2A;

  --ml-error:              #BA1A1A;
  --ml-on-error:           #FFFFFF;
  --ml-error-container:    #FFDAD6;
  --ml-on-error-container: #410002;

  --ml-success:         #2E7D32;
  --ml-on-success:      #FFFFFF;

  --ml-background:     #FAFAFA;
  --ml-on-background:  #1A1A1A;
  --ml-surface:        #FFFFFF;
  --ml-on-surface:     #1A1A1A;
  --ml-surface-variant:    #EEEEEE;
  --ml-on-surface-variant: #5F5F5F;
  --ml-surface-dim:        #E2E2E2;
  --ml-surface-bright:     #FFFFFF;
  --ml-surface-container:  #F3F3F3;

  --ml-outline:         #8A8A8A;
  --ml-outline-variant: #DCDCDC;
  --ml-shadow:          #000000;

  /* -------- типографика -------- */
  --ml-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --ml-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* шкала размеров (упрощённая, из MD3 type scale) */
  --ml-text-display:  32px;  /* крупные заголовки героев */
  --ml-text-headline: 24px;  /* заголовки страниц */
  --ml-text-title:    18px;  /* заголовки карточек и секций */
  --ml-text-body:     16px;  /* основной текст */
  --ml-text-caption:  14px;  /* подписи, второстепенный текст */
  --ml-text-label:    12px;  /* мелкие метки, бейджи */

  --ml-leading-tight: 1.25;
  --ml-leading-normal: 1.5;

  --ml-weight-regular: 400;
  --ml-weight-medium:  500;
  --ml-weight-bold:    700;

  /* -------- отступы (4-pixel grid) -------- */
  --ml-space-1:  4px;
  --ml-space-2:  8px;
  --ml-space-3:  12px;
  --ml-space-4:  16px;
  --ml-space-5:  20px;
  --ml-space-6:  24px;
  --ml-space-8:  32px;
  --ml-space-10: 40px;
  --ml-space-12: 48px;

  /* -------- скругления -------- */
  --ml-radius-xs:   4px;
  --ml-radius-sm:   8px;
  --ml-radius-md:   12px;
  --ml-radius-lg:   16px;
  --ml-radius-xl:   28px;
  --ml-radius-full: 9999px;

  /* -------- тени (MD3 elevation) -------- */
  --ml-elevation-0: none;
  --ml-elevation-1: 0 1px 2px rgba(0, 0, 0, .10),
                    0 1px 3px 1px rgba(0, 0, 0, .06);
  --ml-elevation-2: 0 1px 2px rgba(0, 0, 0, .12),
                    0 2px 6px 2px rgba(0, 0, 0, .08);
  --ml-elevation-3: 0 4px 8px 3px rgba(0, 0, 0, .10),
                    0 1px 3px rgba(0, 0, 0, .12);

  /* -------- прочее -------- */
  --ml-transition-fast:   120ms ease;
  --ml-transition-normal: 200ms ease;
  --ml-z-dropdown: 100;
  --ml-z-sticky:   200;
  --ml-z-modal:    1000;
  --ml-z-toast:    2000;

  /* Нативные контролы (select-меню, scrollbars) следуют теме. */
  color-scheme: light;
}

/* ============================================================
   Тёмная тема — почти чёрное с глянцем. Акцент primary — почти белый
   (инверсия графита). Включается по системной настройке.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not(.theme-light):not(.theme-dark) {
    --ml-primary:              #F2F2F2;
    --ml-on-primary:           #1A1A1A;
    --ml-primary-container:    #242424;
    --ml-on-primary-container: #EDEDED;

    --ml-secondary:              #B8B8B8;
    --ml-on-secondary:           #1A1A1A;
    --ml-secondary-container:    #222222;
    --ml-on-secondary-container: #EDEDED;

    --ml-tertiary:              #B8B8B8;
    --ml-on-tertiary:           #1A1A1A;
    --ml-tertiary-container:    #1E1E1E;
    --ml-on-tertiary-container: #EDEDED;

    --ml-error:              #FFB4AB;
    --ml-on-error:           #690005;
    --ml-error-container:    #93000A;
    --ml-on-error-container: #FFDAD6;

    --ml-success:    #81C784;
    --ml-on-success: #003A03;

    --ml-background:     #0D0D0D;
    --ml-on-background:  #F2F2F2;
    --ml-surface:        #111111;
    --ml-on-surface:     #F2F2F2;
    --ml-surface-variant:    #1E1E1E;
    --ml-on-surface-variant: #A6A6A6;
    --ml-surface-dim:        #080808;
    --ml-surface-bright:     #2A2A2A;
    --ml-surface-container:  #1A1A1A;

    --ml-outline:         #6E6E6E;
    --ml-outline-variant: #2E2E2E;

    color-scheme: dark;  /* нативные select-меню и scrollbars — тёмные */
  }
}

/* Альтернативный триггер тёмной темы — для сред, где
   prefers-color-scheme не работает (например TG WebApp Desktop).
   JS на странице делает document.documentElement.classList.add('theme-dark')
   когда tg.colorScheme === 'dark'. */
html.theme-dark {
  --ml-primary:              #F2F2F2;
  --ml-on-primary:           #1A1A1A;
  --ml-primary-container:    #242424;
  --ml-on-primary-container: #EDEDED;

  --ml-secondary:              #B8B8B8;
  --ml-on-secondary:           #1A1A1A;
  --ml-secondary-container:    #222222;
  --ml-on-secondary-container: #EDEDED;

  --ml-tertiary:              #B8B8B8;
  --ml-on-tertiary:           #1A1A1A;
  --ml-tertiary-container:    #1E1E1E;
  --ml-on-tertiary-container: #EDEDED;

  --ml-error:              #FFB4AB;
  --ml-on-error:           #690005;
  --ml-error-container:    #93000A;
  --ml-on-error-container: #FFDAD6;

  --ml-success:    #81C784;
  --ml-on-success: #003A03;

  --ml-background:     #0D0D0D;
  --ml-on-background:  #F2F2F2;
  --ml-surface:        #111111;
  --ml-on-surface:     #F2F2F2;
  --ml-surface-variant:    #1E1E1E;
  --ml-on-surface-variant: #A6A6A6;
  --ml-surface-dim:        #080808;
  --ml-surface-bright:     #2A2A2A;
  --ml-surface-container:  #1A1A1A;

  --ml-outline:         #6E6E6E;
  --ml-outline-variant: #2E2E2E;

  color-scheme: dark;
}

/* Альтернативный триггер светлой темы — перебивает prefers-color-scheme: dark.
   JS ставит html.theme-light, когда юзер вручную выбрал светлую через переключатель. */
html.theme-light {
  --ml-primary:              #1F1F1F;
  --ml-on-primary:           #FFFFFF;
  --ml-primary-container:    #EDEDED;
  --ml-on-primary-container: #2A2A2A;

  --ml-secondary:              #5F5F5F;
  --ml-on-secondary:           #FFFFFF;
  --ml-secondary-container:    #E8E8E8;
  --ml-on-secondary-container: #2A2A2A;

  --ml-tertiary:              #5F5F5F;
  --ml-on-tertiary:           #FFFFFF;
  --ml-tertiary-container:    #F1F1F1;
  --ml-on-tertiary-container: #2A2A2A;

  --ml-error:              #BA1A1A;
  --ml-on-error:           #FFFFFF;
  --ml-error-container:    #FFDAD6;
  --ml-on-error-container: #410002;

  --ml-success:         #2E7D32;
  --ml-on-success:      #FFFFFF;

  --ml-background:     #FAFAFA;
  --ml-on-background:  #1A1A1A;
  --ml-surface:        #FFFFFF;
  --ml-on-surface:     #1A1A1A;
  --ml-surface-variant:    #EEEEEE;
  --ml-on-surface-variant: #5F5F5F;
  --ml-surface-dim:        #E2E2E2;
  --ml-surface-bright:     #FFFFFF;
  --ml-surface-container:  #F3F3F3;

  --ml-outline:         #8A8A8A;
  --ml-outline-variant: #DCDCDC;

  color-scheme: light;
}


/* ============================================================
   Legacy-алиасы для страниц, которые подключают tokens.css.
   Эти переменные используются в админ-HTML, но не были определены
   в MD3-палитре. Привязываем к MD3-токенам — переключение темы
   подхватывается автоматически (т.к. они resolve на момент paint).
   ============================================================ */
:root {
  --ml-text:        var(--ml-on-surface);
  --ml-text-muted:  var(--ml-on-surface-variant);
  --ml-accent:      var(--ml-primary);
  --ml-border:      var(--ml-outline-variant);
  --ml-bg:          var(--ml-background);
  --ml-bg-soft:     var(--ml-surface-container);
}