/* ============================================================
   tokens.css — Right of Way Driving School
   Слой дизайн-токенов. Два набора значений: тёмная и светлая тема.

   Значения тёмного набора в точности равны тем литералам, что уже
   стоят в существующем CSS, поэтому подключение этого файла само по
   себе ничего не меняет визуально.

   Светлые акценты просчитаны по контрасту: тон и насыщенность
   сохранены, менялась только светлота. Каждый текстовый токен
   проходит WCAG AA (>= 4.5:1) на своей теме.
   ============================================================ */

:root,
html[data-theme="dark"] {
  color-scheme: dark;

  /* поверхности */
  --c-bg:              #050a14;
  --c-bg-deep:         #01050a;
  --c-surface:         rgba(8, 12, 22, 1);
  --c-surface-2:       rgba(9, 13, 24, 0.92);
  --c-surface-raised:  rgba(255, 255, 255, 0.025);
  --c-surface-sunken:  rgba(5, 10, 18, 0.96);
  --c-surface-hover:   rgba(255, 255, 255, 0.05);

  /* границы */
  --c-border:          rgba(255, 255, 255, 0.08);
  --c-border-soft:     rgba(255, 255, 255, 0.06);
  --c-border-strong:   rgba(255, 255, 255, 0.18);
  --c-border-accent:   rgba(0, 212, 255, 0.18);

  /* текст */
  --c-text-1:          #ffffff;
  --c-text-2:          #e0e0e0;
  --c-text-3:          #94a3b8;
  --c-text-nav:        rgba(200, 211, 224, 0.9);

  /* акценты */
  --c-accent:          #00d4ff;
  --c-accent-soft:     rgba(0, 212, 255, 0.05);
  --c-accent-glow:     rgba(0, 212, 255, 0.10);
  --c-accent-on:       #050a14;   /* текст поверх акцентной заливки */
  --c-gold:            #d4af5b;
  --c-orange:          #ff9933;
  --c-purple:          #9b51e0;
  --c-danger:          #ff4757;
  --c-warning:         #ffd700;

  /* тени */
  --c-shadow:          rgba(0, 0, 0, 0.30);
  --c-shadow-soft:     rgba(0, 0, 0, 0.18);

  /* дорожный фон */
  --c-road-sky:        linear-gradient(to bottom, #01050a 0%, #0a1829 100%);
  --c-road-asphalt:    transparent;
  --c-road-glow:       rgba(0, 212, 255, 0.20);
  --c-road-vignette:   radial-gradient(circle, transparent 45%, #000000 100%);
}

html[data-theme="light"] {
  color-scheme: light;

  /* поверхности — страница слегка серо-голубая, карточки белые: так они «всплывают» */
  --c-bg:              #f4f7fb;
  --c-bg-deep:         #e8eef6;
  --c-surface:         #ffffff;
  --c-surface-2:       #ffffff;
  --c-surface-raised:  #ffffff;
  --c-surface-sunken:  #eef2f7;
  --c-surface-hover:   rgba(15, 23, 42, 0.04);

  /* границы */
  --c-border:          rgba(15, 23, 42, 0.10);
  --c-border-soft:     rgba(15, 23, 42, 0.07);
  --c-border-strong:   rgba(15, 23, 42, 0.18);
  --c-border-accent:   rgba(0, 121, 146, 0.30);

  /* текст — 18.72:1 / 10.35:1 / 5.45:1 на белом */
  --c-text-1:          #0b1220;
  --c-text-2:          #334155;
  --c-text-3:          #5b6b7f;
  --c-text-nav:        #334155;

  /* акценты — все >= 4.5:1 на белом */
  --c-accent:          #007992;   /* >=4.50:1 на #fff / #f4f7fb / #eef2f8 */
  --c-accent-soft:     rgba(0, 121, 146, 0.08);
  --c-accent-glow:     rgba(0, 121, 146, 0.10);
  --c-accent-on:       #ffffff;   /* текст поверх акцентной заливки */
  --c-gold:            #8c6c25;   /* >=4.56:1 на светлых фонах */
  --c-orange:          #ad5700;   /* >=4.51:1 на светлых фонах */
  --c-purple:          #9b51e0;   /* 4.52:1 — не менялся */
  --c-danger:          #ee0015;   /* 4.52:1 */
  --c-warning:         #8b7500;   /* 4.52:1 */

  /* тени — на светлом нужны мягче и холоднее */
  --c-shadow:          rgba(15, 23, 42, 0.10);
  --c-shadow-soft:     rgba(15, 23, 42, 0.06);

  /* дорожный фон — дневная версия: светлое небо, серый асфальт */
  --c-road-sky:        linear-gradient(to bottom, #eaf3fb 0%, #cddff0 100%);
  --c-road-asphalt:    #7c8794;
  --c-road-glow:       rgba(255, 255, 255, 0.55);
  --c-road-vignette:   radial-gradient(circle, transparent 42%, rgba(244, 247, 251, 0.92) 100%);
}

/* Плавный переход между темами. Только цвет — без transition на
   размерах, чтобы ничего не «прыгало». */
html[data-theme] body,
html[data-theme] .site-header,
html[data-theme] .neon-footer {
  transition: background-color 0.18s ease, color 0.18s ease;
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme] body,
  html[data-theme] .site-header,
  html[data-theme] .neon-footer {
    transition: none;
  }
}