/**
 * FilmyBazaar Design System — CSS token layer
 * Desktop activation via html.fb-desktop-ott; mobile untouched.
 */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Outfit:wght@400;500;600;700;900&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;600&display=swap');

@media (min-width: 768px) {
  html.fb-desktop-ott {
    /* Backgrounds — layered depth */
    --fb-bg-void: #020202;
    --fb-bg-primary: #050505;
    --fb-bg-secondary: #0a0a0a;
    --fb-bg-surface: #101010;
    --fb-bg-elevated: #161616;
    --fb-bg-overlay: #1c1c1c;
    --fb-bg-glass: rgba(255, 255, 255, 0.03);

    /* Brand */
    --fb-brand-red: #e50914;
    --fb-brand-red-glow: rgba(229, 9, 20, 0.15);
    --fb-brand-red-deep: #b8070f;
    --fb-brand-cyan: #00d4ff;
    --fb-brand-cyan-glow: rgba(0, 212, 255, 0.12);
    --fb-brand-gold: #ffd700;
    --fb-brand-gold-glow: rgba(255, 215, 0, 0.1);
    --fb-brand-gold-deep: #c9a227;

    /* Text hierarchy */
    --fb-text-primary: #ffffff;
    --fb-text-secondary: #b0b0b0;
    --fb-text-tertiary: #707070;
    --fb-text-muted: #404040;
    --fb-text-inverse: #050505;

    /* Semantic */
    --fb-success: #22c55e;
    --fb-warning: #f59e0b;
    --fb-error: #ef4444;
    --fb-info: #3b82f6;

    /* Typography */
    --fb-font-display: 'Bebas Neue', Impact, sans-serif;
    --fb-font-heading: 'Outfit', 'DM Sans', sans-serif;
    --fb-font-body: 'Inter Variable', Inter, system-ui, sans-serif;
    --fb-font-label: 'JetBrains Mono', 'Fira Code', monospace;

    /* Spacing (8px grid) */
    --fb-space-1: 4px;
    --fb-space-2: 8px;
    --fb-space-3: 12px;
    --fb-space-4: 16px;
    --fb-space-5: 20px;
    --fb-space-6: 24px;
    --fb-space-8: 32px;
    --fb-space-10: 40px;
    --fb-space-12: 48px;
    --fb-space-16: 64px;

    /* Motion */
    --fb-ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --fb-ease-snappy: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --fb-ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
    --fb-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --fb-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --fb-dur-instant: 80ms;
    --fb-dur-fast: 150ms;
    --fb-dur-normal: 250ms;
    --fb-dur-moderate: 350ms;
    --fb-dur-slow: 500ms;
    --fb-dur-cinematic: 800ms;

    /* Shadows */
    --fb-shadow-card: 0 4px 24px rgba(0, 0, 0, 0.6), 0 1px 4px rgba(0, 0, 0, 0.4);
    --fb-shadow-card-hover: 0 20px 60px rgba(0, 0, 0, 0.8), 0 8px 24px rgba(0, 0, 0, 0.6);
    --fb-shadow-red-glow: 0 0 30px rgba(229, 9, 20, 0.4), 0 0 60px rgba(229, 9, 20, 0.2);
    --fb-shadow-text: 0 2px 20px rgba(0, 0, 0, 0.8);

    /* Borders */
    --fb-border-subtle: 1px solid rgba(255, 255, 255, 0.04);
    --fb-border-soft: 1px solid rgba(255, 255, 255, 0.08);
    --fb-border-medium: 1px solid rgba(255, 255, 255, 0.12);
    --fb-border-brand: 1px solid rgba(229, 9, 20, 0.4);

    /* Radius */
    --fb-radius-xs: 4px;
    --fb-radius-sm: 8px;
    --fb-radius-md: 12px;
    --fb-radius-lg: 16px;
    --fb-radius-xl: 20px;
    --fb-radius-pill: 9999px;

    /* Layout shell */
    --fb-sidebar-expanded: 240px;
    --fb-sidebar-collapsed: 72px;
    --fb-topnav-height: 64px;
    --fb-topnav-height-compact: 48px;
    --fb-sidebar-width: var(--fb-sidebar-expanded);
    --fb-content-max: 2400px;

    /* Legacy aliases for existing premium layers */
    --primary: var(--fb-brand-red);
    --primary-dark: var(--fb-brand-red-deep);
    --background: var(--fb-bg-primary);
    --surface: var(--fb-bg-surface);
    --text: var(--fb-text-primary);
    --text-secondary: var(--fb-text-secondary);
    --gradient: linear-gradient(135deg, var(--fb-brand-red), #ff4d4d);
  }

  html.fb-desktop-ott body.fb-premium {
    background: var(--fb-bg-primary);
    color: var(--fb-text-primary);
    font-family: var(--fb-font-body);
  }

  /* Glass utility */
  html.fb-desktop-ott .fb-glass {
    background: var(--fb-bg-glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: var(--fb-border-soft);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  }

  /* Skeleton shimmer */
  @keyframes fbShimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
  }

  html.fb-desktop-ott .fb-skeleton {
    background: linear-gradient(90deg, #111 0%, #1a1a1a 50%, #111 100%);
    background-size: 1000px 100%;
    animation: fbShimmer 2s infinite linear;
  }

  @media (prefers-reduced-motion: reduce) {
    html.fb-desktop-ott .fb-skeleton {
      animation: none;
    }
  }
}