/* =========================================================================
   Keylo Mini App — дизайн-токены
   Подключение: tokens.css → components.css → mascot.css
   Тема: Telegram сам выставляет --tg-theme-* на <html>.
   Тёмные производные цвета включаются атрибутом <html data-theme="dark">
   (одна строка при старте: document.documentElement.dataset.theme =
   Telegram.WebApp.colorScheme). Вне Telegram — по prefers-color-scheme.
   ========================================================================= */

:root {
  /* ---- Бренд (не зависят от темы) ---- */
  --kl-ink: #15171E;
  --kl-brass: #F2B33D;
  --kl-brass-strong: #DE9E22;   /* нажатое состояние латунных кнопок */
  --kl-cream: #FAF6EE;
  --kl-mint: #2BC48A;
  --kl-coral: #FF6B57;
  --kl-slate: #6B7280;
  --kl-white: #FFFFFF;

  /* ---- Запасные значения, светлая тема (если нет переменных Telegram) ---- */
  --kl-fb-bg: #FFFFFF;
  --kl-fb-secondary-bg: #F6F2EA;
  --kl-fb-text: #15171E;
  --kl-fb-hint: #6B7280;
  --kl-fb-link: #A8740F;
  --kl-fb-button: #F2B33D;
  --kl-fb-button-text: #15171E;
  --kl-fb-destructive: #D9452F;

  /* ---- Цвета темы: Telegram → запасное значение ---- */
  --kl-bg:            var(--tg-theme-bg-color,               var(--kl-fb-bg));
  --kl-bg-secondary:  var(--tg-theme-secondary-bg-color,     var(--kl-fb-secondary-bg));
  --kl-text:          var(--tg-theme-text-color,             var(--kl-fb-text));
  --kl-hint:          var(--tg-theme-hint-color,             var(--kl-fb-hint));
  --kl-link:          var(--tg-theme-link-color,             var(--kl-fb-link));
  --kl-button:        var(--tg-theme-button-color,           var(--kl-fb-button));
  --kl-button-text:   var(--tg-theme-button-text-color,      var(--kl-fb-button-text));
  --kl-destructive:   var(--tg-theme-destructive-text-color, var(--kl-fb-destructive));

  /* ---- Роли поверхностей ---- */
  --kl-page: var(--kl-bg-secondary);   /* фон экрана */
  --kl-surface: var(--kl-bg);          /* карточки, списки */
  --kl-fill: color-mix(in srgb, var(--kl-text) 6%, transparent);        /* подложки, трек */
  --kl-fill-strong: color-mix(in srgb, var(--kl-text) 11%, transparent);
  --kl-border: color-mix(in srgb, var(--kl-text) 9%, transparent);
  --kl-border-strong: color-mix(in srgb, var(--kl-text) 16%, transparent);

  /* ---- Акцент бренда ----
     Основные кнопки внутри приложения — латунь Keylo.
     Хотите кнопки цвета темы Telegram: --kl-accent: var(--kl-button);
     --kl-on-accent: var(--kl-button-text);                                */
  --kl-accent: var(--kl-brass);
  --kl-accent-pressed: var(--kl-brass-strong);
  --kl-on-accent: var(--kl-ink);
  --kl-accent-soft: color-mix(in srgb, var(--kl-brass) 18%, transparent);
  --kl-accent-text: #9A6A0C;           /* латунь, читаемая как текст на светлом */

  /* ---- Статусы ---- */
  --kl-success: var(--kl-mint);
  --kl-success-soft: color-mix(in srgb, var(--kl-mint) 15%, transparent);
  --kl-success-text: #12825A;
  --kl-danger: var(--kl-coral);
  --kl-danger-soft: color-mix(in srgb, var(--kl-coral) 14%, transparent);
  --kl-danger-text: var(--kl-destructive);
  --kl-warning: var(--kl-brass);
  --kl-warning-soft: var(--kl-accent-soft);
  --kl-warning-text: var(--kl-accent-text);

  /* ---- Персонаж ---- */
  --kl-mascot-body: var(--kl-ink);
  --kl-mascot-edge: transparent;       /* обводка тела, нужна только на тёмном */
  --kl-mascot-screen: #0B0C11;
  --kl-mascot-screen-edge: #2C2F3B;

  /* ---- Типографика: один Google Font (Manrope 500/600/700/800) ---- */
  --kl-font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --kl-fw-medium: 500;
  --kl-fw-semibold: 600;
  --kl-fw-bold: 700;
  --kl-fw-heavy: 800;

  --kl-fs-2xs: 11px;
  --kl-fs-xs: 12px;
  --kl-fs-sm: 13px;
  --kl-fs-md: 15px;   /* основной текст */
  --kl-fs-lg: 17px;
  --kl-fs-xl: 20px;
  --kl-fs-2xl: 24px;  /* заголовок экрана */
  --kl-fs-3xl: 30px;  /* крупные цифры */
  --kl-lh-tight: 1.15;
  --kl-lh-base: 1.45;
  --kl-ls-tight: -0.02em;

  /* ---- Отступы: шаг 4 px ---- */
  --kl-s-1: 4px;
  --kl-s-2: 8px;
  --kl-s-3: 12px;
  --kl-s-4: 16px;
  --kl-s-5: 20px;
  --kl-s-6: 24px;
  --kl-s-8: 32px;
  --kl-s-10: 40px;
  --kl-gutter: 16px;

  /* ---- Радиусы ---- */
  --kl-r-xs: 6px;
  --kl-r-sm: 10px;
  --kl-r-md: 12px;
  --kl-r-lg: 16px;
  --kl-r-xl: 20px;
  --kl-r-pill: 999px;

  /* ---- Тени ---- */
  --kl-shadow-1: 0 1px 2px rgba(21, 23, 30, 0.05), 0 1px 1px rgba(21, 23, 30, 0.03);
  --kl-shadow-2: 0 8px 24px -10px rgba(21, 23, 30, 0.22), 0 2px 6px -2px rgba(21, 23, 30, 0.06);
  --kl-shadow-accent: 0 8px 20px -8px rgba(242, 179, 61, 0.55);
  --kl-focus-ring: 0 0 0 3px color-mix(in srgb, var(--kl-brass) 35%, transparent);

  /* ---- Размеры ---- */
  --kl-hit: 44px;          /* минимальная зона нажатия */
  --kl-icon: 24px;
  --kl-icon-sm: 18px;
  --kl-tabbar-h: 60px;
  --kl-app-max: 430px;
  --kl-app-min: 320px;

  /* ---- Безопасные зоны: Telegram (Bot API 8.0+) → env() ---- */
  --kl-safe-top: max(env(safe-area-inset-top, 0px), calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)));
  --kl-safe-bottom: max(env(safe-area-inset-bottom, 0px), calc(var(--tg-safe-area-inset-bottom, 0px) + var(--tg-content-safe-area-inset-bottom, 0px)));
  --kl-safe-left: max(env(safe-area-inset-left, 0px), var(--tg-safe-area-inset-left, 0px));
  --kl-safe-right: max(env(safe-area-inset-right, 0px), var(--tg-safe-area-inset-right, 0px));

  /* ---- Движение ---- */
  --kl-dur-fast: 150ms;
  --kl-dur-base: 220ms;
  --kl-dur-slow: 320ms;
  --kl-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --kl-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  color-scheme: light;
}

/* ---- Тёмная тема: запасные значения и производные ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --kl-fb-bg: #1A1C24;
    --kl-fb-secondary-bg: #0F1015;
    --kl-fb-text: #F3F1EC;
    --kl-fb-hint: #8B90A0;
    --kl-fb-link: #F2B33D;
    --kl-fb-button: #F2B33D;
    --kl-fb-button-text: #15171E;
    --kl-fb-destructive: #FF7A68;

    --kl-accent-text: #F2B33D;
    --kl-accent-soft: color-mix(in srgb, var(--kl-brass) 16%, transparent);
    --kl-success-text: #3FD69C;
    --kl-mascot-edge: #3A3E4C;
    --kl-shadow-1: 0 0 0 transparent;
    --kl-shadow-2: 0 10px 28px -12px rgba(0, 0, 0, 0.7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --kl-fb-bg: #1A1C24;
  --kl-fb-secondary-bg: #0F1015;
  --kl-fb-text: #F3F1EC;
  --kl-fb-hint: #8B90A0;
  --kl-fb-link: #F2B33D;
  --kl-fb-button: #F2B33D;
  --kl-fb-button-text: #15171E;
  --kl-fb-destructive: #FF7A68;

  --kl-accent-text: #F2B33D;
  --kl-accent-soft: color-mix(in srgb, var(--kl-brass) 16%, transparent);
  --kl-success-text: #3FD69C;
  --kl-mascot-edge: #3A3E4C;
  --kl-shadow-1: 0 0 0 transparent;
  --kl-shadow-2: 0 10px 28px -12px rgba(0, 0, 0, 0.7);
  color-scheme: dark;
}