/* =========================================================
   ДИЗАЙН-СИСТЕМА · ТЕННИС-ПРИЛОЖЕНИЕ
   Токены — цвет, типографика, отступы, радиусы, тени.
   Подключить этот файл первым, до остальных стилей.
   ========================================================= */

   /* @import Google Fonts отсюда удалён намеренно: на лендинге Inter и
      Space Grotesk подключены локально через @font-face в site.css —
      без сторонних запросов. При синхронизации файла с
      rallyiOS/tokens.css строку @import нужно удалять снова. */

   :root{
   
     /* ---- Цвет: корт, а не дженерик-крем ---- */
     --court:        #17301F;  /* тёмно-зелёный — hero-блоки, акцентные карточки */
     --court-2:      #234631;  /* светлее court, для градиентов */
     --clay:         #BE5A2E;  /* глина — ЕДИНСТВЕННЫЙ цвет действия: CTA, "в работе" */
     --clay-soft:    #E7C7B0;  /* фон бейджа "на супервизии", иконки-плейсхолдеры */
     --clay-text:    #8A3E1D;  /* текст на clay-soft */
     --ball:         #A9C23F;  /* цвет мяча — "согласовано", положительный прогресс */
     --ball-soft:    #EEF4D6;  /* фон бейджа "согласовано", фон фокус-карточки */
     --ball-text:    #4C5A18;  /* текст на ball-soft */
   
     --danger:       #B23B2E;  /* деструктивные действия: удалить аккаунт, отменить */
     --danger-soft:      #F7E2DE;
     --danger-soft-line: #EEC9C1;
   
     --chalk:        #F5F2EA;  /* фон приложения (мел линий корта) */
     --paper:        #FFFFFF;  /* фон карточек */
     --ink:          #16201A;  /* основной текст */
     --ink-soft:     #5B6459;  /* вторичный текст, лейблы */
     --line:         #E1DCCF;  /* границы, разделители, фон прогресс-баров */
   
     /* ---- Типографика ---- */
     --font-display: 'Space Grotesk', sans-serif; /* заголовки, цифры, метрики */
     --font-body:    'Inter', sans-serif;          /* весь остальной текст */
   
     --fs-h1:        22px;  /* заголовок экрана */
     --fs-h2:        15px;  /* заголовок карточки / топбар */
     --fs-metric-lg:  24px;  /* крупная метрика (главная) */
     --fs-metric-md:  19px;  /* метрика среднего размера (score-pill) */
     --fs-body:       14.5px;
     --fs-caption:    12.5px;
     --fs-micro:      11px;
   
     /* ---- Отступы (8pt-подобная шкала) ---- */
     --sp-4:  4px;
     --sp-6:  6px;
     --sp-8:  8px;
     --sp-10: 10px;
     --sp-12: 12px;
     --sp-14: 14px;
     --sp-16: 16px;
     --sp-18: 18px;
     --sp-22: 22px;
   
     /* ---- Радиусы ---- */
     --radius-card: 20px;  /* крупные карточки, hero-блоки */
     --radius-sm:   14px;  /* мелкие карточки внутри секций */
     --radius-pill: 999px; /* бейджи, чипы */
   
     /* ---- Тени ---- */
     --shadow-card: 0 2px 8px rgba(23, 48, 31, 0.06);
     --shadow-float: 0 12px 24px rgba(23, 48, 31, 0.14);
   }
   
   /* =========================================================
      ТЁМНАЯ ТЕМА
      Переопределяет только цветовые токены — типографика,
      отступы и радиусы общие для обеих тем.
   
      Применение: повесить [data-theme="dark"] на <body> (или
      на корневой контейнер приложения) вручную по переключателю,
      либо продублировать блок под
      @media (prefers-color-scheme: dark) если тема должна
      следовать за системной настройкой устройства.
      ========================================================= */
   [data-theme="dark"]{
     color-scheme: dark;
     --court:        #2F5A3E;  /* светлее, чем в светлой теме — иначе не отличить от фона */
     --court-2:      #3E6E4D;
   
     --clay:         #D97A46;  /* чуть ярче для контраста на тёмном фоне */
     --clay-soft:    rgba(217, 122, 70, 0.16);
     --clay-text:    #F0B384;
   
     --ball:         #B9D34A;
     --ball-soft:    rgba(185, 211, 74, 0.14);
     --ball-text:    #D4E895;
   
     --danger:           #E0685A;
     --danger-soft:      rgba(224, 104, 90, 0.14);
     --danger-soft-line: rgba(224, 104, 90, 0.3);
   
     --chalk:        #10201A;  /* фон приложения — тёмный корт, не чистый чёрный */
     --paper:        #1A2C23;  /* фон карточек — на 1 шаг светлее фона */
     --ink:          #F1EFE7;
     --ink-soft:     #A9B3A4;
     --line:         #2C3D32;
   
     --shadow-card:  0 2px 8px rgba(0, 0, 0, 0.35);
     --shadow-float: 0 12px 24px rgba(0, 0, 0, 0.5);
   }

   /* Тот же набор, если скрипт темы не выполнился.
      data-theme="light" отключает его при ручном выборе светлой темы.
      Значения держать одинаковыми с блоком [data-theme="dark"]. */
   @media (prefers-color-scheme: dark) {
     :root:not([data-theme="light"]) {
       color-scheme: dark;
       --court:        #2F5A3E;
       --court-2:      #3E6E4D;
       --clay:         #D97A46;
       --clay-soft:    rgba(217, 122, 70, 0.16);
       --clay-text:    #F0B384;
       --ball:         #B9D34A;
       --ball-soft:    rgba(185, 211, 74, 0.14);
       --ball-text:    #D4E895;
       --danger:           #E0685A;
       --danger-soft:      rgba(224, 104, 90, 0.14);
       --danger-soft-line: rgba(224, 104, 90, 0.3);
       --chalk:        #10201A;
       --paper:        #1A2C23;
       --ink:          #F1EFE7;
       --ink-soft:     #A9B3A4;
       --line:         #2C3D32;
       --shadow-card:  0 2px 8px rgba(0, 0, 0, 0.35);
       --shadow-float: 0 12px 24px rgba(0, 0, 0, 0.5);
     }
   }
   
   /* =========================================================
      ПРАВИЛО ЦВЕТА (важно соблюдать при внедрении):
      - --clay используется ТОЛЬКО для: главной CTA-кнопки
        и статуса "в процессе / на супервизии".
        Больше ни для чего — иначе цвет теряет сигнальность.
      - --ball используется ТОЛЬКО для: статуса "согласовано"
        и положительного/завершённого прогресса.
      - --court — единственный тёмный акцентный фон
        (hero-карточки, карточки с замечаниями).
      - Everything else (карточки, фон экрана, текст) —
        --chalk / --paper / --ink / --ink-soft / --line.
      - Это правило не меняется в тёмной теме — меняются только
        значения токенов, не их роли.
      ========================================================= */