/*
 * Дизайн-токены. ЕДИНСТВЕННОЕ место, где стоят конкретные цвета и размеры.
 *
 * Значения взяты из макета OddScore. В компонентах нет ни одного литерала —
 * только var(--...). Правится цвет здесь, меняется везде.
 *
 * Если правите компонент и тянет написать #18181B или 12px — значит нужного
 * токена не хватает. Заведите его тут, а не в компоненте.
 */

:root {
  /* ── Поверхности ────────────────────────────────────────────────────── */
  /* Из макета: #09090B — фон страницы и карточек прогнозов,
     #18181B — плитки статистики и неактивные табы. */
  --color-bg: #09090b;
  --color-surface: #18181b;
  --color-surface-2: #131316;
  --color-surface-hover: #1f1f23;
  --color-border: #27272a;
  --color-border-strong: #3f3f46;

  /* ── Текст ──────────────────────────────────────────────────────────── */
  --color-text: #fafafa;
  --color-text-muted: #a1a1aa;
  --color-text-dim: #71717a;
  --color-text-inverse: #09090b;

  /* ── Акцент ─────────────────────────────────────────────────────────── */
  --color-accent: #0d69fd;
  --color-accent-hover: #2b7dff;
  --color-accent-soft: rgba(13, 105, 253, 0.14);
  --color-accent-text: #fafafa;

  /* ── Исходы ─────────────────────────────────────────────────────────── */
  /* Точных значений из макета пока нет — взяты близкие к скриншотам:
     зелёный у высокой уверенности, жёлтый у средней, красный у гостей.
     Заменить, когда придут значения. */
  --color-win: #4ade80;
  --color-draw: #f5c542;
  --color-loss: #f04438;
  --color-win-soft: rgba(74, 222, 128, 0.14);
  --color-draw-soft: rgba(245, 197, 66, 0.14);
  --color-loss-soft: rgba(240, 68, 56, 0.14);

  /* ── Сегменты полосы вероятностей ───────────────────────────────────── */
  /* В макете это отдельная от бейджей шкала: 1 синий, X серый, 2 красный.
     Бейджи процентов живут на своей — зелёный/жёлтый. Мешать их нельзя,
     иначе «X» станет жёлтым, а на макете он нейтральный. */
  --seg-home: var(--color-accent);
  --seg-draw: #52525b;
  --seg-away: #f04438;

  /* ── Служебные ──────────────────────────────────────────────────────── */
  --color-value: #e170ff;
  --color-value-soft: rgba(225, 112, 255, 0.14);
  --color-live: #f04438;
  --color-skeleton: #18181b;
  --color-skeleton-shine: #232327;

  /* ── Свечения ───────────────────────────────────────────────────────── */
  /* Плитки статистики и карточка AI-разбора в макете собраны размытыми
     пятнами с mix-blend-mode: plus-lighter. Картинок под них не нужно. */
  --glow-blue: #0d69fd;
  --glow-yellow: #f5c542;
  --glow-green: #7ee787;
  --glow-purple: #692ce3;
  --glow-magenta: #c84ee8;
  --glow-white: #fbf9fa;
  --glow-blur-lg: 50px;
  --glow-blur-md: 30px;
  --glow-blur-sm: 8px;

  /* ── Типографика ────────────────────────────────────────────────────── */
  /* Open Runde из макета, подключается в @font-face ниже. Системный стек
     дальше по списку — на случай, если файл не догрузится. */
  --font-heading: "Open Runde", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: "Open Runde", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-xs: 0.75rem;    /* 12 */
  --text-sm: 0.875rem;   /* 14 — табы, подписи */
  --text-base: 1rem;     /* 16 — основной текст */
  --text-lg: 1.125rem;   /* 18 — подзаголовок героя */
  --text-xl: 1.25rem;    /* 20 — цифры бонуса */
  --text-2xl: 1.75rem;   /* 28 */
  --text-3xl: 2.5rem;    /* 40 */
  --text-4xl: 3.75rem;   /* 60 — заголовок героя */

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* В макете заголовки и кнопки идут в 100%, текст — в 120%. */
  --leading-tight: 1;
  --leading-normal: 1.2;
  --leading-relaxed: 1.6;
  /* Сквозной трекинг макета: -2%. */
  --tracking-tight: -0.02em;

  /* ── Отступы ────────────────────────────────────────────────────────── */
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */

  /* ── Скругления ─────────────────────────────────────────────────────── */
  --radius-sm: 8px;     /* карточки прогнозов */
  --radius-md: 12px;    /* кнопки, плитки статистики */
  --radius-lg: 16px;
  --radius-pill: 600px; /* табы */

  /* ── Тени ───────────────────────────────────────────────────────────── */
  /* В макете у всего чёрное кольцо в 1px, у кнопок и карточек — ещё
     внутренняя светлая линия. Держим раздельно, чтобы комбинировать. */
  --ring-black: 0 0 0 1px #000000;
  --inset-highlight: inset 0 1px 2px 1px rgba(255, 255, 255, 0.15);
  --inset-hairline: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  --shadow-sm: var(--ring-black);
  --shadow-md: var(--ring-black), 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: var(--ring-black), 0 12px 32px rgba(0, 0, 0, 0.45);

  /* ── Раскладка ──────────────────────────────────────────────────────── */
  --container-max: 1200px;
  --container-pad: var(--space-4);
  --header-height: 64px;
  --filters-height: 56px;

  /* ── Размеры элементов ──────────────────────────────────────────────── */
  --size-flag: 16px;
  --size-mark: 22px;
  --size-logo-mark: 28px;
  --size-team-logo: 40px;      /* иконки команд в макете 40×40 */
  --size-team-logo-sm: 28px;
  --size-control: 36px;        /* высота таба из макета */
  --size-burger-bar: 18px;
  --size-avatar: 48px;
  --size-avatar-lg: 64px;
  --size-icon-sm: 20px;        /* ai, people */
  --size-icon-md: 40px;        /* ball, target, line */
  --stat-tile-height: 200px;   /* плитка статистики из макета */

  /* ── Толщина полос ──────────────────────────────────────────────────── */
  --bar-height-sm: 6px;
  --bar-height-md: 8px;
  --burger-bar-gap: 6px;

  /* ── Минимальные ширины колонок ─────────────────────────────────────── */
  --col-min-mini: 140px;
  --col-min-outcome: 120px;
  --col-keystat: 3rem;

  /* ── Мобильное меню ─────────────────────────────────────────────────── */
  --drawer-width: min(280px, 80vw);

  /* ── Эффекты ────────────────────────────────────────────────────────── */
  --blur-backdrop: 8px;
  --color-overlay: rgba(0, 0, 0, 0.6);
  --skeleton-card-height: 96px;

  /* ── Прочее ─────────────────────────────────────────────────────────── */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
  --z-header: 100;
  --z-filters: 90;
  --z-drawer: 200;
  --z-overlay: 150;
}

/*
 * Open Runde — шрифт макета. Четыре начертания, которые в нём используются:
 * 400 обычный, 500 средний, 600 полужирный, 700 жирный.
 *
 * woff2 первым, woff запасным: второй нужен только очень старым браузерам,
 * но весит он на треть больше, поэтому современные до него не доходят.
 *
 * font-display: swap — текст рисуется системным шрифтом сразу и подменяется,
 * когда файл догрузится. Иначе первый экран стоял бы пустым.
 */
@font-face {
  font-family: "Open Runde";
  src: url("/fonts/OpenRunde-Regular.woff2") format("woff2"),
       url("/fonts/OpenRunde-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Open Runde";
  src: url("/fonts/OpenRunde-Medium.woff2") format("woff2"),
       url("/fonts/OpenRunde-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Open Runde";
  src: url("/fonts/OpenRunde-Semibold.woff2") format("woff2"),
       url("/fonts/OpenRunde-Semibold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Open Runde";
  src: url("/fonts/OpenRunde-Bold.woff2") format("woff2"),
       url("/fonts/OpenRunde-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/*
 * Брейкпоинты.
 *
 * Единственное место, где значения стоят литералами и иначе не могут:
 * @media не умеет читать custom properties — это ограничение CSS,
 * а не недосмотр. Ширины продублированы для справки, менять их нужно
 * и тут, и в main.css:
 *
 *   1024px — планшет
 *    768px — мобильный (появляется бургер, меню уезжает в шторку)
 *    640px — узкий мобильный
 */

/* Планшет */
@media (max-width: 1024px) {
  :root {
    --text-4xl: 2.75rem;
    --text-3xl: 2rem;
  }
}

/* Мобильный */
@media (max-width: 640px) {
  :root {
    --text-4xl: 2rem;
    --text-3xl: 1.625rem;
    --text-2xl: 1.375rem;
    --container-pad: var(--space-3);
    --header-height: 56px;
  }
}

/* Уважаем системную настройку: анимации отключаемы. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
  }
}