/* =====================================================
   Sport Vozmozhnosti Design System — единый источник переменных
   Подключается первым на всех страницах приложения.
   Компонентные стили живут в страницах, переменные — здесь.
   ===================================================== */

:root {
  /* ── Основной цвет ── */
  --color-primary:        #c62828;
  --color-primary-dark:   #a61b1b;
  --color-primary-soft:   #fff3f2;
  --color-primary-border: rgba(198, 40, 40, 0.18);
  --color-primary-focus:  rgba(198, 40, 40, 0.12);

  /* ── Нейтральная палитра ── */
  --color-bg:             #f4f5f7;
  --color-card:           #ffffff;
  --color-border:         #e4e7ec;
  --color-border-strong:  #d0d5dd;
  --color-text:           #101828;
  --color-muted:          #667085;
  --color-subtle:         #344054;

  /* ── Статусы ── */
  --color-success-bg:     #ecfdf3;
  --color-success-text:   #027a48;
  --color-success-border: #a6f4c5;
  --color-error-bg:       #fef3f2;
  --color-error-text:     #b42318;
  --color-error-border:   #fecdca;

  /* ── Медали ── */
  --color-gold-bg:        rgba(212, 175, 55, 0.12);
  --color-gold-text:      #8a6b00;
  --color-gold-border:    rgba(212, 175, 55, 0.28);
  --color-silver-bg:      rgba(192, 192, 192, 0.18);
  --color-silver-text:    #5f6670;
  --color-silver-border:  rgba(160, 160, 160, 0.35);
  --color-bronze-bg:      rgba(205, 127, 50, 0.14);
  --color-bronze-text:    #8b4d1f;
  --color-bronze-border:  rgba(205, 127, 50, 0.30);

  /* ── Радиусы ── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-btn:  12px;
  --radius-card: 16px;
  --radius-lg:   18px;
  --radius-pill: 999px;

  /* ── Тени ── */
  --shadow-sm:      0 1px 3px  rgba(16, 24, 40, 0.06);
  --shadow-md:      0 8px 24px rgba(16, 24, 40, 0.06);
  --shadow-lg:      0 14px 30px rgba(16, 24, 40, 0.10);
  --shadow-primary: 0 8px 20px rgba(198, 40, 40, 0.18);

  /* ── Размеры компонентов ── */
  --height-btn:    44px;
  --height-input:  46px;
  --width-sidebar: 250px;

  /* ── Обратная совместимость с --apple-* переменными ──
     get_shared_background_css() и ряд страниц используют
     --apple-primary и т.д. Они разрешаются через эти алиасы.
     Переопределение в <style> ниже по каскаду всё равно выиграет,
     поэтому эти значения служат only fallback'ом.             */
  --apple-primary:      var(--color-primary);
  --apple-primary-dark: var(--color-primary-dark);
  --apple-primary-soft: var(--color-primary-soft);
  --apple-text:         var(--color-text);
  --apple-border:       var(--color-border);
  --apple-shadow:       var(--shadow-md);
}

/* ── Базовый враппер для inline SVG-иконок ── */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon svg {
  width: var(--icon-size, 20px);
  height: var(--icon-size, 20px);
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  display: block;
}