/* Sportsmen — design tokens
 * Бренд: «Graphite + Volt». Нейтральная графитовая база, один яркий акцент (тема), Айрон — герой.
 * Тема по умолчанию — Volt. Акцент меняется атрибутом data-accent на <html> (volt | ocean | ember | grape | mint).
 * Светлая/тёмная: prefers-color-scheme или data-mode="light|dark" на <html>.
 * Контраст всех текстовых пар ≥ 4.5:1 — таблица в design-system.md (раздел Accessibility).
 */
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800&family=Unbounded:wght@500;600;700;800&display=swap');

:root {
  /* ---------- Neutral palette (light) ---------- */
  --c-bg: #F3F4EF;            /* фон приложения */
  --c-surface: #FFFFFF;       /* карточки */
  --c-surface-2: #E9EBE4;     /* вложенные поля, трек прогресса, сегменты */
  --c-stage: #E4E7DD;         /* «сцена» Айрона (свет снизу) */
  --c-stage-glow: rgba(198, 241, 53, .38);
  --c-stage-deep: #1E2618;    /* тёмная сцена (Welcome, пейвол, AR): верх градиента */
  --c-stage-deep-2: #0C0E0B;  /* тёмная сцена: низ градиента */
  --c-stage-deep-glow: color-mix(in srgb, var(--c-accent) 22%, transparent); /* свечение тёмной сцены — от акцента темы */
  --c-seg-on: #FFFFFF;        /* выбранный сегмент: светлее дорожки + обводка --c-line-strong */
  --c-accent-edge: var(--c-accent-deep); /* контур акцентных заливок без текста (WCAG 1.4.11 ≥ 3:1); в тёмном — нет */
  --c-control-off: #7B8175;   /* контур выключенного тумблера/радио: 3.9:1 на surface */
  /* Свотчи выбора темы — фиксированные цвета акцентов (не зависят от текущей темы); всегда с обводкой --c-line-strong */
  --swatch-volt: #C6F135; --swatch-ocean: #45C2FF; --swatch-ember: #FF7043; --swatch-grape: #B39BFF; --swatch-mint: #3EE3AA;
  --c-line: rgba(17, 20, 14, .10);
  --c-line-strong: rgba(17, 20, 14, .22);
  --c-text: #11140E;          /* 16.8:1 на bg */
  --c-text-2: #5B6156;        /* 5.8:1 на bg, 6.4:1 на surface */
  --c-text-on-dark: #F2F4EE;
  --c-ink: #11140E;           /* текст/иконки поверх акцента — во всех темах */
  --c-inverse: #11140E;       /* тёмные плашки (CTA вторичный, бабл) */
  --c-on-inverse: #F2F4EE;
  --c-scrim: rgba(12, 14, 11, .48);
  --c-success: #1E7A3C;       /* 5.4:1 на surface */
  --c-danger: #C62828;        /* 5.6:1 на surface */
  --c-warning: #8A5A00;
  --c-gold: #8A5F00;          /* рекорды (текст), 5.6:1 на surface */
  --c-gold-fill: #FFD25A;     /* фон бейджа рекорда, текст ink */

  /* ---------- Accent: Volt (default) ---------- */
  --c-accent: #C6F135;        /* заливки: CTA, активные сегменты, кольцо таймера */
  --c-accent-deep: #466300;   /* тёмный вариант акцента: текст на светлых поверхностях (6.2:1) */
  --c-accent-ink: var(--c-accent-deep); /* акцент как ТЕКСТ/иконка; в тёмном режиме = --c-accent */
  --c-accent-on-inverse: var(--c-accent); /* акцентный текст в бабле Айрона (инверсная подложка) */
  --c-accent-soft: rgba(198, 241, 53, .22);
  --c-on-accent: #11140E;     /* 14.2:1 на Volt */

  /* ---------- Typography ---------- */
  --font-display: 'Unbounded', 'SF Pro Display', system-ui, sans-serif; /* заголовки, цифры таймера, счётчики */
  --font-text: 'Onest', 'SF Pro Text', system-ui, sans-serif;           /* интерфейс и чтение */
  /* Шкала привязана к iOS Dynamic Type «Large» (Body = 17). Во Flutter — TextTheme × textScaler. */
  --fs-timer: 84px;   --lh-timer: 1;     /* таймер отдыха, Unbounded 700, tabular */
  --fs-hero: 40px;    --lh-hero: 1.05;   /* итог, большие числа */
  --fs-title-1: 30px; --lh-title-1: 1.12;/* заголовок экрана, Unbounded 700 */
  --fs-title-2: 22px; --lh-title-2: 1.18;/* заголовок секции/карточки, Unbounded 600 */
  --fs-title-3: 19px; --lh-title-3: 1.25;/* Onest 700 */
  --fs-body: 17px;    --lh-body: 1.4;    /* Onest 500 */
  --fs-callout: 15px; --lh-callout: 1.38;/* Onest 500 */
  --fs-footnote: 13px;--lh-footnote: 1.35;/* Onest 600 */
  --fs-caption: 12px; --lh-caption: 1.3; /* Onest 700, uppercase +0.06em — только метки */
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-heavy: 800;

  /* ---------- Spacing (4-pt grid) ---------- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
  --gutter: 20px;              /* поля экрана, compact */
  --gutter-regular: 32px;      /* поля экрана, regular (iPad / Duo inner) */

  /* ---------- Radii ---------- */
  --r-xs: 8px; --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px;

  /* ---------- Sizes ---------- */
  --tap-min: 44px;             /* iOS 44 pt / Android 48 dp */
  --tap-session: 56px;         /* основные кнопки сессии (Done, Skip) */
  --cta-h: 60px;
  --tabbar-h: 84px;
  --rail-w: 96px;

  /* ---------- Elevation (мягкие тени) ---------- */
  --sh-1: 0 1px 2px rgba(17, 20, 14, .06), 0 2px 8px rgba(17, 20, 14, .05);
  --sh-2: 0 2px 6px rgba(17, 20, 14, .06), 0 12px 32px rgba(17, 20, 14, .09);
  --sh-3: 0 8px 24px rgba(17, 20, 14, .10), 0 24px 64px rgba(17, 20, 14, .14);
  --sh-accent: 0 10px 30px rgba(140, 180, 10, .35);

  /* ---------- Motion (зеркало design/motion.md) ---------- */
  --dur-instant: 80ms; --dur-short: 150ms; --dur-medium: 280ms; --dur-long: 450ms;
  --ease-standard: cubic-bezier(.2, .75, .34, .94);   /* entrance-sharp */
  --ease-settle: cubic-bezier(0, .65, .51, .99);
  --ease-exit: cubic-bezier(1, .02, .54, .42);
  --ease-travel: cubic-bezier(.65, 0, .35, 1);
  /* springs (mass 1): snappy 400/30, bouncy 250/15, gentle 120/20 — в CSS аппроксимация: */
  --spring-snappy: cubic-bezier(.3, 1.25, .5, 1);
  --spring-bouncy: cubic-bezier(.34, 1.56, .64, 1);
  --spring-gentle: cubic-bezier(.25, 1.1, .5, 1);
  --dur-crossfade: 200ms;      /* замена анимаций при Reduce Motion (motion.md §4) */
  --stagger: 50ms;
}

/* ---------- Dark mode ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    --c-bg: #0C0E0B;
    --c-surface: #181B16;
    --c-surface-2: #23271F;
    --c-stage: #151912;
    --c-stage-glow: rgba(198, 241, 53, .20);
    --c-seg-on: #3A4033;      /* 1.6:1 к дорожке #23271F + обводка */
    --c-accent-edge: transparent;
    --c-control-off: #8E9488;
    --c-line: rgba(242, 244, 238, .09);
    --c-line-strong: rgba(242, 244, 238, .2);
    --c-text: #F2F4EE;        /* 17.5:1 */
    --c-text-2: #A3A99D;      /* 8.0:1 на bg, 7.2:1 на surface */
    --c-inverse: #F2F4EE;
    --c-on-inverse: #11140E;
    --c-scrim: rgba(0, 0, 0, .6);
    --c-success: #6BD68C;
    --c-danger: #FF7A70;
    --c-warning: #FFC44D;
    --c-gold: #FFD25A;
    --c-accent-ink: var(--c-accent); /* на тёмном акцент читается как текст напрямую */
    --c-accent-on-inverse: var(--c-accent-deep); /* бабл в тёмном режиме светлый */
    --c-accent-soft: rgba(198, 241, 53, .14);
    --sh-1: 0 1px 2px rgba(0,0,0,.4);
    --sh-2: 0 8px 28px rgba(0,0,0,.45);
    --sh-3: 0 24px 64px rgba(0,0,0,.55);
    --sh-accent: 0 10px 30px rgba(198, 241, 53, .18);
  }
}
:root[data-mode="dark"] {
  --c-bg: #0C0E0B; --c-surface: #181B16; --c-surface-2: #23271F; --c-stage: #151912;
  --c-stage-glow: rgba(198, 241, 53, .20); --c-seg-on: #3A4033; --c-accent-edge: transparent; --c-control-off: #8E9488; --c-line: rgba(242,244,238,.09); --c-line-strong: rgba(242,244,238,.2);
  --c-text: #F2F4EE; --c-text-2: #A3A99D; --c-inverse: #F2F4EE; --c-on-inverse: #11140E; --c-scrim: rgba(0,0,0,.6);
  --c-success: #6BD68C; --c-danger: #FF7A70; --c-warning: #FFC44D; --c-gold: #FFD25A;
  --c-accent-ink: var(--c-accent); --c-accent-on-inverse: var(--c-accent-deep); --c-accent-soft: rgba(198,241,53,.14);
  --sh-1: 0 1px 2px rgba(0,0,0,.4); --sh-2: 0 8px 28px rgba(0,0,0,.45); --sh-3: 0 24px 64px rgba(0,0,0,.55);
}

/* ---------- Accent themes (fill / text-on-light) ----------
 * --c-accent-deep — текст акцентом на светлом; в тёмном режиме --c-accent-ink = --c-accent (все ≥ 6.7:1 на #181B16).
 * --c-on-accent всегда #11140E (≥ 6.7:1 на любом акценте).
 */
:root[data-accent="ocean"] { --c-accent: #45C2FF; --c-accent-deep: #005F95; --c-accent-soft: rgba(69,194,255,.2); --c-stage-glow: rgba(69,194,255,.32); --sh-accent: 0 10px 30px rgba(0,130,200,.3); }
:root[data-accent="ember"] { --c-accent: #FF7043; --c-accent-deep: #B02F00; --c-accent-soft: rgba(255,112,67,.18); --c-stage-glow: rgba(255,112,67,.3); --sh-accent: 0 10px 30px rgba(220,80,30,.3); }
:root[data-accent="grape"] { --c-accent: #B39BFF; --c-accent-deep: #6141D8; --c-accent-soft: rgba(179,155,255,.22); --c-stage-glow: rgba(179,155,255,.34); --sh-accent: 0 10px 30px rgba(110,70,230,.3); }
:root[data-accent="mint"]  { --c-accent: #3EE3AA; --c-accent-deep: #00745A; --c-accent-soft: rgba(62,227,170,.2); --c-stage-glow: rgba(62,227,170,.3); --sh-accent: 0 10px 30px rgba(0,150,110,.3); }
/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-instant: 0ms; --dur-short: 0ms; --dur-medium: var(--dur-crossfade); --dur-long: var(--dur-crossfade); --spring-snappy: ease; --spring-bouncy: ease; --spring-gentle: ease; --stagger: 0ms; }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --c-scrim: rgba(12, 14, 11, .92); --c-stage-glow: transparent; --c-stage-deep-glow: transparent; }
  /* Reduce Transparency: без свечения сцены, прожектора пейвола и стекла — сплошные поверхности (motion.md §5) */
}