/* ============================================================
   TELEGA.CLICK — Design Tokens
   ------------------------------------------------------------
   Прокси для Telegram. Светлая тема, визуальный язык Telegram:
   синий акцент, мягкие скругления, системные шрифты, чистота.
   ============================================================ */

:root {
  /* ---- COLOR --------------------------------------------- */
  /* Telegram-blue. Основной акцент: кнопки, ссылки, бейджи. */
  --tc-blue:        #3390ec;
  --tc-blue-hover:  #2481db;
  --tc-blue-soft:   #e8f3fe;   /* мягкий фон под акцентом */
  --tc-blue-ink:    #168acd;   /* глубокий, для текста на светлом */

  /* Premium — золотистый, как Telegram Premium */
  --tc-premium:        #f7a72b;
  --tc-premium-hover:  #e89818;
  --tc-premium-soft:   #fff4e1;
  --tc-premium-grad:   linear-gradient(135deg, #ffb142 0%, #f78d3c 100%);

  /* Нейтрали */
  --tc-ink:        #0f1419;   /* основной текст, заголовки */
  --tc-ink-2:      #2c3e50;   /* подзаголовки */
  --tc-text:       #4a5560;   /* body */
  --tc-muted:      #707a83;   /* hint, secondary */
  --tc-subtle:     #a3acb6;   /* placeholder, meta */

  --tc-bg:         #ffffff;   /* основной фон */
  --tc-bg-soft:    #f4f6f8;   /* фон страницы за карточкой */
  --tc-surface:    #ffffff;   /* карточки */
  --tc-surface-2:  #f7f9fb;   /* вложенные элементы */
  --tc-border:     #eaeef2;
  --tc-border-strong: #d7dde3;

  --tc-success:    #2bb673;
  --tc-success-soft: #e3f7ee;
  --tc-danger:     #e64646;

  /* Overlays */
  --tc-scrim:      rgba(15, 20, 25, 0.55);

  /* ---- TYPOGRAPHY --------------------------------------- */
  /* Системные стеки — как у Telegram Web. */
  --tc-font:       -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter",
                   "Helvetica Neue", "Apple Color Emoji", system-ui, sans-serif;
  --tc-font-mono:  ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --tc-fw-regular:   400;
  --tc-fw-medium:    500;
  --tc-fw-semibold:  600;
  --tc-fw-bold:      700;

  /* Размер шрифтов */
  --tc-text-xs:    12px;
  --tc-text-sm:    13px;
  --tc-text-base:  15px;
  --tc-text-md:    17px;
  --tc-text-lg:    20px;
  --tc-text-xl:    24px;
  --tc-text-2xl:   30px;
  --tc-text-3xl:   38px;
  --tc-text-4xl:   48px;

  --tc-leading-tight:  1.2;
  --tc-leading-snug:   1.35;
  --tc-leading-normal: 1.5;

  /* ---- RADII / SHADOW ----------------------------------- */
  --tc-r-sm:       8px;     /* small chips, tags */
  --tc-r-md:       12px;    /* кнопки, инпуты */
  --tc-r-lg:       16px;    /* карточки */
  --tc-r-xl:       20px;    /* главная карточка */
  --tc-r-2xl:      28px;    /* очень крупные */
  --tc-r-pill:     9999px;

  --tc-shadow-xs:  0 1px 2px rgba(15, 20, 25, 0.04);
  --tc-shadow-sm:  0 2px 6px rgba(15, 20, 25, 0.06);
  --tc-shadow-md:  0 8px 24px rgba(15, 20, 25, 0.08);
  --tc-shadow-lg:  0 24px 48px -12px rgba(15, 20, 25, 0.18);
  --tc-shadow-blue: 0 8px 24px -4px rgba(51, 144, 236, 0.35);

  /* Transitions */
  --tc-fast:    120ms ease;
  --tc-base:    180ms ease;
  --tc-smooth:  280ms cubic-bezier(.2,.8,.2,1);

  /* Layout */
  --tc-card-w:    420px;     /* base card width — single-window app */
  --tc-card-w-wide: 720px;   /* dual-pane variants */
}

/* ============================================================
   Базовые стили
   ============================================================ */
.tc-root {
  font-family: var(--tc-font);
  color: var(--tc-text);
  background: var(--tc-bg-soft);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}
.tc-root h1, .tc-root h2, .tc-root h3, .tc-root h4 {
  font-family: var(--tc-font);
  color: var(--tc-ink);
  letter-spacing: -0.01em;
  margin: 0;
}

/* ============================================================
   Animations
   ============================================================ */
@keyframes tcPulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  100% { transform: scale(2.6); opacity: 0;    }
}
@keyframes tcFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}
@keyframes tcSlideIn {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)     scale(1);   }
}
@keyframes tcSpin    { to { transform: rotate(360deg); } }
@keyframes tcBlink   { 50% { opacity: 0; } }
@keyframes tcShimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

/* Paper plane — мягкое покачивание без пропадания */
@keyframes tcPlane {
  0%   { transform: translate(0,0) rotate(-4deg); }
  25%  { transform: translate(6%, -8%) rotate(4deg); }
  50%  { transform: translate(10%, -4%) rotate(6deg); }
  75%  { transform: translate(4%, -10%) rotate(0deg); }
  100% { transform: translate(0, 0) rotate(-4deg); }
}

/* Logo: tapping hand + signal waves */
.tc-logo-hand  { animation: tcHandTap 2.8s ease-in-out infinite; transform-origin: 178px 150px; }
.tc-logo-plane { transform-origin: 90px 100px; transform-box: fill-box; }
.tc-logo-wave   { animation: tcLogoWave 2.8s ease-out infinite; transform-origin: 90px 100px; transform-box: fill-box; }
.tc-logo-wave-2 { animation: tcLogoWave 2.8s ease-out 0.2s infinite; transform-origin: 90px 100px; transform-box: fill-box; }
.tc-logo-flyaway .tc-logo-plane { animation: tcLogoFlyaway 1s ease-in forwards; }
@keyframes tcHandTap {
  0%, 20%, 40%, 100% { transform: translate(0, 0) scale(1); }
  26%, 34%           { transform: translate(-3px, -4px) scale(0.97); }
}
@keyframes tcLogoWave {
  0%, 20%, 52%, 100% { transform: scale(1);    opacity: 0; }
  28%                { transform: scale(1.02); opacity: 0.5; }
  45%                { transform: scale(1.35); opacity: 0; }
}
/* Premium — анимации иконок (тонкие, петля) */
.tc-prem-gauge { animation: tcPremGauge 3.6s ease-in-out infinite; transform-origin: 12px 16.5px; }
.tc-prem-flash { animation: tcPremFlash 3.6s ease-in-out infinite; transform-origin: 50% 50%; transform-box: fill-box; }
@keyframes tcPremGauge {
  0%, 60%, 100% { transform: rotate(0deg); }
  20%           { transform: rotate(-22deg); }
  35%           { transform: rotate(8deg); }
  50%           { transform: rotate(-4deg); }
}
@keyframes tcPremFlash {
  0%, 30%, 60%, 100% { opacity: 1;   transform: scale(1); }
  40%                { opacity: 0.35; transform: scale(0.92); }
  50%                { opacity: 1;   transform: scale(1.18); }
}