:root {
  /* Фирменные цвета SportiQ */
  --color-primary-navy: #1E3A8A;   /* Deep Navy: основной бренд (шапка, футер, темные блоки) */
  --color-primary-blue: #2563EB;   /* Primary Blue: интерактивные кнопки, индикаторы, ссылки */
  --color-primary-light: #93C5FD;  /* Светло-синий: стейты «просмотрено», мягкие плашки */
  --color-accent-orange: #F59E0B;  /* Amber Orange: акцентный "iq", бейджи, фокусные элементы */
  --color-bg-scaffold: #F1F5F9;    /* Светло-серый фон страниц (основной контентный фон) */
  --color-bg-input: #F8FAFC;       /* Очень светлый серый для полей ввода */
  --color-surface-card: #FFFFFF;   /* Чисто белый для карточек и подложек */
  --color-text-primary: #212121;   /* Основной цвет темного текста */
  --color-slate-grey: #94A3B8;     /* Цвет границ, неактивных стейтов, иконок */
  
  /* Семантические цвета состояний ставок */
  --color-success: #10B981;        /* Зеленый: победные исходы / границы выигранных матчей */
  --color-danger: #F43F5E;         /* Красный: проигрышные исходы / ошибки */
  --color-info: #38BDF8;           /* Голубой: завершенные матчи без ставки */
  --color-tg-blue: #0088CC;        /* Синий цвет бренда Telegram */

  /* Типографика */
  --font-primary: 'Titillium Web', sans-serif;
  --font-logo: 'Michroma', sans-serif;

  /* Пространственные токены */
  --spacing-small: 8px;
  --spacing-medium: 12px;
  --spacing-large: 16px;
  --spacing-xlarge: 24px;

  /* Скругления углов (Border Radius) */
  --radius-small: 8px;             /* Категории, теги */
  --radius-medium: 12px;           /* Стандартные кнопки, инпуты */
  --radius-large: 16px;            /* Крупные элементы, поп-апы */
  --radius-card: 24px;             /* Специфическое скругление для MatchCard и дашбордов */

  /* Анимации */
  --duration-short: 200ms;         /* Ховеры, микро-взаимодействия */
  --duration-medium: 300ms;        /* Появление элементов */
}

/* Base resets & styles mapped to Design Tokens */
body {
  font-family: var(--font-primary);
  background-color: var(--color-bg-scaffold);
  color: var(--color-text-primary);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

.font-logo {
  font-family: var(--font-logo);
}

/* Custom Tooltips for Achievements */
.tooltip-container {
  position: relative;
}

.tooltip-text {
  visibility: hidden;
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background-color: #1e293b;
  color: #fff;
  text-align: center;
  padding: 8px 12px;
  border-radius: var(--radius-small);
  white-space: nowrap;
  font-size: 0.875rem;
  opacity: 0;
  transition: opacity var(--duration-short) ease-in-out, transform var(--duration-short) ease-in-out;
  z-index: 50;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #1e293b transparent transparent transparent;
}

.tooltip-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Circular Progress Bar Animation */
.circle-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
}

.circle-progress-user {
  fill: none;
  stroke: var(--color-success);
  stroke-linecap: round;
  transition: stroke-dashoffset 1s ease-out;
}

.circle-progress-ai {
  fill: none;
  stroke: var(--color-primary-blue);
  stroke-linecap: round;
  transition: stroke-dashoffset 1s ease-out;
}

/* Pulsing effect for Hero CTA button */
@keyframes pulse-cta {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.5);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(37, 99, 235, 0);
  }
}

@keyframes pulse-tg {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(0, 136, 204, 0.5);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(0, 136, 204, 0);
  }
}

.pulse-primary {
  animation: pulse-cta 2s infinite;
}

.pulse-telegram {
  animation: pulse-tg 2s infinite;
}

/* MatchCard active border transition */
.match-card-highlight {
  border-color: var(--color-accent-orange) !important;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.3) !important;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-bg-scaffold);
}
::-webkit-scrollbar-thumb {
  background: var(--color-slate-grey);
  border-radius: var(--radius-small);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary-blue);
}