/* ==========================================================================
   Velveflix — Design Tokens v2 (2026 ребрендинг, scarlet)
   Источник: VelveFlix.dc.html + new_design_mapping_20260616.md (Фаза 0).
   ИЗОЛЯЦИЯ: всё переопределение скоупится под html.vf-2026.
   Без класса vf-2026 этот файл присутствует, но НИЧЕГО не меняет — прод не тронут.
   Имена переменных совпадают с боевым vf-tokens.css → компоненты подхватывают авто.
   Класс vf-2026 ставит инлайн-скрипт mu-plugin (?vf_v2=1 / localStorage).
   ========================================================================== */

html.vf-2026 {
  /* --- Поверхности: темнее, новый базовый фон #08080a --- */
  --vf-bg:           #08080a;   /* было #0E0F13 — почти чёрный */
  --vf-surface-1:    #131319;   /* плейсхолдер постера/карточка ~ #15151a */
  --vf-surface-2:    #1b1b22;
  --vf-surface-3:    #24242d;
  --vf-surface-4:    #2e2e39;
  --vf-line:         #25252f;
  --vf-line-strong:  #34343f;

  /* --- Текст --- */
  --vf-text:          #f5f5f7;  /* было #F2F4F8 — на #08080a ~18.4:1 */
  --vf-text-2:        #c2c2cc;
  --vf-text-muted:    #9a9aa6;
  /* text-on-accent оставляем ТЁМНЫМ: #1A0E0C на #ff2d46 = 5.14:1 (AA) */
  --vf-text-on-accent:#1A0E0C;

  /* --- Акцент (scarlet) + состояния --- */
  --vf-accent:        #ff2d46;  /* было #FF5C49 — алый. Как фон/заливка/нетекст */
  --vf-accent-hover:  #ff6173;
  --vf-accent-press:  #b11226;
  --vf-accent-soft:   #2a1216;  /* тёмная подложка акцента (чипы/soft-фон) */
  --vf-accent-ring:   rgba(255,45,70,.40);  /* кольцо фокуса/hover вокруг карточки */
  --vf-focus-ring:    #6AA8FF;
  /* glow под акцентными CTA (новое) */
  --vf-accent-glow:   rgba(255,45,70,.5);
  /* читаемый акцент-ДЛЯ-ТЕКСТА: #ff6173 на #08080a = 6.87:1 (AA).
     Использовать там, где нужен «акцентный текст», т.к. #ff2d46-текст хоть и 5.45:1,
     #ff6173 даёт запас. НЕ перекрываем им основной --vf-text/ссылки автоматически. */
  --vf-accent-text:   #ff6173;
  /* фирменный градиент лого/CTA-плашек */
  --vf-accent-grad:   linear-gradient(135deg, #ff2d46, #b11226);

  /* --- Семантика --- */
  --vf-rating:    #ffd34d;   /* было #FFC044 — на #08080a ~14:1 */
  --vf-rating-bg: #2a2310;

  /* --- Типографика: новая пара (display + body) --- */
  --vf-font-sans: "Plus Jakarta Sans", "Jakarta Fallback", system-ui, -apple-system,
                  "Segoe UI", Roboto, sans-serif;
  --vf-font-display: "Bricolage Grotesque", "Bricolage Fallback", system-ui,
                  -apple-system, "Segoe UI", Roboto, sans-serif;

  /* --- Spacing / контейнеры: больше воздуха (44px десктоп-пад) --- */
  --vf-container-pad-lg: 44px;   /* было 32px */

  /* --- Радиусы: добавочные ступени макета --- */
  --vf-radius-md:    12px;   /* кнопки/карточки/инфо-блоки */
  --vf-radius-lg:    14px;   /* continue/land/жанр-карты */
  --vf-radius-xl:    18px;   /* detail-постер, модалки */
  --vf-radius-pill:  999px;
  /* (xs/sm/round наследуются из боевых токенов без изменений) */

  /* --- Тени / glow макета --- */
  --vf-shadow-1: 0 10px 26px rgba(0,0,0,.45);   /* карточка покой */
  --vf-shadow-2: 0 18px 40px rgba(0,0,0,.6);    /* карточка/контейнер hover */
  --vf-shadow-3: 0 28px 70px rgba(0,0,0,.6);    /* detail-постер */
  /* акцент-рамка на hover карточки (новое) */
  --vf-shadow-poster-hover: 0 18px 40px rgba(0,0,0,.6), 0 0 0 2px var(--vf-accent);
  /* glow под акцентными CTA (новое) */
  --vf-shadow-cta:        0 12px 32px var(--vf-accent-glow);
  --vf-shadow-cta-hover:  0 18px 44px var(--vf-accent-glow);
  --vf-elev-overlay: rgba(8,8,10,.72);

  /* --- Ключевые градиенты макета (для компонентов след. фаз) --- */
  --vf-hero-grad-h: linear-gradient(90deg, rgba(5,5,7,.96) 0%, rgba(5,5,7,.7) 32%,
                    rgba(5,5,7,.18) 62%, rgba(5,5,7,0) 100%);
  --vf-hero-grad-v: linear-gradient(0deg, #08080a 1%, rgba(8,8,10,.55) 22%,
                    rgba(8,8,10,0) 55%);
  --vf-footer-warm: linear-gradient(0deg, rgba(255,45,70,.04), transparent);
}