/* ==========================================================================
   Velveflix — Design Tokens 2026 (dark-first)
   Источник правды: design_system_2026.md (vf-design-lead, 2026-06-06)
   Подключать ПЕРВЫМ в dooplay-child. Все компоненты ссылаются только на эти переменные.
   Статус: спецификация. НЕ выкатка. Реализация — отдельным спринтом vf-design-engineer.
   ========================================================================== */

:root {
  /* --- Поверхности (elevation 0→4) --- */
  --vf-bg:           #0E0F13;
  --vf-surface-1:    #16181F;
  --vf-surface-2:    #1E212B;
  --vf-surface-3:    #272B37;
  --vf-surface-4:    #323744;
  --vf-line:         #2C313D;
  --vf-line-strong:  #3A4150;

  /* --- Текст (контраст проверен на surface-2) --- */
  --vf-text:          #F2F4F8;  /* primary ~15.8:1 */
  --vf-text-2:        #B9C0CE;  /* secondary ~8.7:1 */
  --vf-text-muted:    #8A93A6;  /* muted ~4.9:1 — нижний предел для текста */
  --vf-text-on-accent:#1A0E0C;

  /* --- Акцент (бренд) + состояния --- */
  --vf-accent:        #FF5C49;
  --vf-accent-hover:  #FF7163;
  --vf-accent-press:  #E84A38;
  --vf-accent-soft:   #2A1714;
  --vf-accent-ring:   #FF5C4966;
  --vf-focus-ring:    #6AA8FF;

  /* --- Семантика --- */
  --vf-rating:    #FFC044;
  --vf-rating-bg: #2A2310;
  --vf-success:   #4ED39B;
  --vf-danger:    #FF6B6B;
  --vf-info:      #6AA8FF;

  /* --- Where to Watch (типы доступа) --- */
  --vf-wtw-stream:  #6AA8FF;
  --vf-wtw-free:    #4ED39B;
  --vf-wtw-rent:    #FFC044;
  --vf-wtw-buy:     #C49BFF;
  --vf-wtw-chip-bg: var(--vf-surface-3);
  --vf-wtw-logo-bg: #FFFFFF;

  /* --- Рекламная зона --- */
  --vf-ad-bg:     #131620;
  --vf-ad-border: #232838;
  --vf-ad-label:  #6B7488;
  /* высоты для резерва места (CLS=0); значения от vf-adops 06.06 */
  --vf-ad-h-mobile:       100px; /* 320×100 (фолбэк 320×50) */
  --vf-ad-h-rectangle:    250px; /* 300×250 MPU — главный in-content */
  --vf-ad-h-rectangle-lg: 280px; /* опц. 336×280, только десктоп */
  --vf-ad-h-leaderboard:   90px; /* 728×90 десктоп */
  --vf-ad-h-billboard:    250px; /* опц. 970×250, только ≥1024px */
  --vf-ad-h-anchor:       100px; /* нижний бар (только если WtW пуст) */

  /* --- Скелетоны / disabled --- */
  --vf-skeleton:       #1B1E27;
  --vf-skeleton-shine: #252935;
  --vf-disabled:       #4A505E;

  /* --- Типографика --- */
  --vf-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --vf-fw-regular: 400;
  --vf-fw-medium:  500;
  --vf-fw-semibold:600;
  --vf-fw-bold:    700;
  --vf-fw-extrabold:800; /* дисплейность заголовков/H1 (Inter variable, без отд. display-шрифта) */

  --vf-fs-display: clamp(1.75rem, 1.2rem + 2.6vw, 2.75rem);
  --vf-fs-h2:      clamp(1.35rem, 1.1rem + 1.1vw, 1.75rem);
  --vf-fs-h3:      clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --vf-fs-body:    1rem;
  --vf-fs-sm:      0.875rem;
  --vf-fs-xs:      0.75rem;

  --vf-lh-tight:  1.15;
  --vf-lh-snug:   1.3;
  --vf-lh-normal: 1.6;
  --vf-ls-tight: -0.01em;
  --vf-ls-caps:   0.04em;

  /* --- Spacing (4px база) --- */
  --vf-space-0: 0;
  --vf-space-1: 4px;
  --vf-space-2: 8px;
  --vf-space-3: 12px;
  --vf-space-4: 16px;
  --vf-space-5: 24px;
  --vf-space-6: 32px;
  --vf-space-8: 48px;
  --vf-space-10:64px;
  --vf-space-12:96px;

  --vf-grid-gap:        var(--vf-space-3);
  --vf-grid-gap-lg:     var(--vf-space-4);
  --vf-container-pad:   var(--vf-space-4);
  --vf-container-pad-lg:var(--vf-space-6);
  --vf-container-max:   1280px;

  /* --- Радиусы --- */
  --vf-radius-xs:    4px;
  --vf-radius-sm:    8px;
  --vf-radius-md:    12px;
  --vf-radius-lg:    16px;
  --vf-radius-pill:  999px;
  --vf-radius-round: 50%;

  /* --- Тени / elevation --- */
  --vf-shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --vf-shadow-2: 0 4px 12px rgba(0,0,0,.45);
  --vf-shadow-3: 0 12px 32px rgba(0,0,0,.55);
  --vf-shadow-poster-hover: 0 8px 24px rgba(0,0,0,.5);
  --vf-elev-overlay: rgba(14,15,19,.72);

  /* --- Z-index --- */
  --vf-z-base:       0;
  --vf-z-card-hover: 10;
  --vf-z-sticky:     100;
  --vf-z-dropdown:   200;
  --vf-z-overlay:    300;
  --vf-z-modal:      400;
  --vf-z-toast:      500;

  /* --- Motion --- */
  --vf-dur-fast: 120ms;
  --vf-dur-base: 180ms;
  --vf-dur-slow: 240ms;
  --vf-ease-standard: cubic-bezier(.2,0,.2,1);
  --vf-ease-out:      cubic-bezier(0,0,.2,1);
  --vf-ease-in:       cubic-bezier(.4,0,1,1);

  /* --- Брейкпоинты (для справки; в media-queries значениями) --- */
  --vf-bp-sm: 480px;
  --vf-bp-md: 768px;
  --vf-bp-lg: 1024px;
  --vf-bp-xl: 1280px;
}

/* --- Светлая тема ОТКЛЮЧЕНА 12.06.2026: компоненты содержат хардкоды #fff,
   при системной light-теме H1/текст становились белым по белому (отказы).
   Сайт всегда тёмный. Палитра light — в бэкапе .bak-lightoff-20260612 и
   velveflix-design/tokens.css; включать только после чистки хардкодов (28×). --- */

/* --- Motion restraint: a11y (обязательно) --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Правило hover: только устройства с реальным указателем --- */
/* применять в компонентах: @media (hover:hover) and (pointer:fine){ .vf-card:hover{...} } */