/* ==========================================================================
   НооЛинк — дизайн-токены
   ========================================================================== */

:root {
  /* Цвет — поверхности (светлая Apple-подобная тема: максимум белого, минимум цвета) */
  --bg-void: #fafafa;
  --bg-surface: #ffffff;
  --bg-surface-2: #f2f2f7;
  --bg-surface-3: #f2f3f7;

  /* Цвет — акценты. --accent-noo — фирменный синий НооЛинк, неизменный (вход, аккаунт-профиль,
     общий чейз вне мероприятия). --accent-spark и производные — акцент "внутри мероприятия":
     по умолчанию тот же синий, но переопределяется темой саммита (см. "Тема саммита" ниже) —
     организатор выбирает цвет, и он используется в самом саммите и на карточке саммита в списке. */
  --accent-noo: #007aff;
  --accent-noo-dim: #dceeff;
  --accent-spark: #007aff;
  --accent-spark-dim: #dceeff;
  --gradient-spark: linear-gradient(135deg, #007aff 0%, #007aff 100%);
  --gradient-spark-soft: linear-gradient(135deg, #007aff14 0%, #007aff14 100%);
  --mint-live: #34c759;
  --mint-live-dim: #34c75926;
  --color-warning: #ff9f0a;
  --color-warning-dim: #ff9f0a26;
  --red-error: #ff3b30;
  /* Кольцо-"фольга" на иконках разделов саммита (Кейс 5) — фиксированное,
     не переопределяется темой саммита и одинаковое для всех разделов.
     Цитирует фольгированный ободок на QR-бейдже участника (Кейс 4), а не
     служит смысловой группировкой. Специально НЕ синий/фиолетовый/зелёный:
     заняты темой саммита (--accent-spark) и живым индикатором (--mint-live). */
  --gradient-badge-ring: linear-gradient(135deg, #db8f68 0%, #8a452d 100%);

  /* Текст */
  --text-primary: #1c1c1e;
  --text-secondary: #8e8e93;
  --text-tertiary: #9a9aa0;
  --text-on-accent: #ffffff;

  /* Границы */
  --border-hairline: #e5e5ea;
  --border-focus: #007aff;

  /* Скругления */
  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 14px;
  --radius-xs: 10px;
  --radius-pill: 999px;

  /* Отступы */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;

  /* Шрифты */
  --font-display: "Raleway", sans-serif;
  --font-body: "Raleway", sans-serif;
  --font-mono: "Montserrat", sans-serif;

  /* Тень/свечение */
  --glow-noo: 0 12px 32px -8px rgba(0, 122, 255, 0.45);
  --glow-spark: 0 12px 32px -8px rgba(0, 122, 255, 0.4);
  --shadow-card: 0 2px 16px -4px rgba(0, 0, 0, 0.08);
  --shadow-modal: 0 -8px 32px -8px rgba(0, 0, 0, 0.16);

  /* Движение */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 150ms;
  --dur-base: 260ms;
  --dur-slow: 420ms;
}

/* ==========================================================================
   Тема саммита — организатор выбирает акцентный цвет своего мероприятия.
   Атрибут data-theme вешается на .phone-frame (всё внутри мероприятия — Кейс 4,
   Кейс 5 и далее) или прямо на карточку саммита в списке (Кейс 3) — переопределяет
   только "spark"-семейство переменных, --accent-noo остаётся фирменным синим.
   Новая тема = один блок ниже; ничего в компонентах менять не нужно.
   ========================================================================== */
[data-theme="violet"] {
  --accent-spark: #7c5cff;
  --accent-spark-dim: #efe9ff;
  --gradient-spark: linear-gradient(135deg, #8b6bff 0%, #6a3df2 100%);
  --gradient-spark-soft: linear-gradient(135deg, #7c5cff1f 0%, #7c5cff1f 100%);
  --glow-spark: 0 12px 32px -8px rgba(124, 92, 255, 0.45);
}
[data-theme="emerald"] {
  --accent-spark: #0ea672;
  --accent-spark-dim: #e0f5ec;
  --gradient-spark: linear-gradient(135deg, #14c184 0%, #0a8a5c 100%);
  --gradient-spark-soft: linear-gradient(135deg, #0ea6721f 0%, #0ea6721f 100%);
  --glow-spark: 0 12px 32px -8px rgba(14, 166, 114, 0.4);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg-void);
  font-family: var(--font-body);
  color: var(--text-primary);
  /* lining-nums — явно просим у Raleway "ровные" цифры, все на одной высоте по
     базовой линии. Без этого шрифт может отдавать oldstyle-цифры (у части
     цифр есть выносные элементы выше/ниже строки, отсюда и "прыгающий" вид
     чисел вроде "2026" в заголовках). font-synthesis:none — чтобы браузер не
     подрисовывал псевдо-жирное начертание для символов, которых нет в
     загруженном наборе Raleway (тоже читается как "цифры не в тон" тексту). */
  font-variant-numeric: lining-nums;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}