@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

/* ===================== PeepBox Design Tokens ===================== */
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-bg2: var(--bg2);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-destructive: var(--destructive);
  --color-success: var(--success);
  --color-warning: var(--warning);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-chart-6: var(--chart-6);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
  --font-sans: var(--font-vazirmatn);
  --font-mono: var(--font-geist-mono);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}

/* PeepBox cinematic dark theme — always on (streaming platform) */
:root {
  --radius: 0.875rem;

  --background: #070B14;
  --bg2: #0D1320;
  --foreground: #F8FAFC;
  --card: #121A29;
  --card-foreground: #F8FAFC;
  --popover: #0D1320;
  --popover-foreground: #F8FAFC;

  --primary: #7C3AED;
  --primary-foreground: #F8FAFC;
  --secondary: #EC4899;
  --secondary-foreground: #F8FAFC;
  --accent: #22D3EE;
  --accent-foreground: #070B14;

  --muted: #0D1320;
  --muted-foreground: #94A3B8;

  --destructive: #EF4444;
  --success: #10B981;
  --warning: #F59E0B;

  --border: rgba(255, 255, 255, 0.08);
  --input: rgba(255, 255, 255, 0.1);
  --ring: #7C3AED;

  --chart-1: #7C3AED;
  --chart-2: #EC4899;
  --chart-3: #22D3EE;
  --chart-4: #10B981;
  --chart-5: #F59E0B;
  --chart-6: #EF4444;

  --sidebar: #0D1320;
  --sidebar-foreground: #F8FAFC;
  --sidebar-primary: #7C3AED;
  --sidebar-primary-foreground: #F8FAFC;
  --sidebar-accent: #121A29;
  --sidebar-accent-foreground: #F8FAFC;
  --sidebar-border: rgba(255, 255, 255, 0.08);
  --sidebar-ring: #7C3AED;
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  html {
    scroll-behavior: smooth;
  }
  body {
    @apply bg-background text-foreground;
    font-feature-settings: "ss01", "ss02";
    background-image:
      radial-gradient(ellipse 80% 50% at 50% -20%, rgba(124, 58, 237, 0.18), transparent),
      radial-gradient(ellipse 60% 40% at 100% 0%, rgba(236, 72, 153, 0.08), transparent);
    background-attachment: fixed;
  }
}

/* ===================== Utilities ===================== */
@layer utilities {
  .glass {
    background: rgba(18, 26, 41, 0.6);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.08);
  }
  .glass-strong {
    background: rgba(13, 19, 32, 0.85);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  .text-gradient {
    background: linear-gradient(135deg, #7C3AED 0%, #EC4899 50%, #22D3EE 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
  .bg-gradient-brand {
    background: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);
  }
  .bg-gradient-cinematic {
    background: linear-gradient(180deg, rgba(7, 11, 20, 0) 0%, rgba(7, 11, 20, 0.6) 50%, rgba(7, 11, 20, 0.95) 100%);
  }
  .shadow-glow {
    box-shadow: 0 0 40px -10px rgba(124, 58, 237, 0.5);
  }
  .shadow-glow-pink {
    box-shadow: 0 0 40px -10px rgba(236, 72, 153, 0.5);
  }
  .hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .hide-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .scroll-snap-x {
    scroll-snap-type: x mandatory;
  }
  .snap-start {
    scroll-snap-align: start;
  }
}

/* Custom scrollbar for content areas */
.peepbox-scroll::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.peepbox-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
}
.peepbox-scroll::-webkit-scrollbar-thumb {
  background: rgba(124, 58, 237, 0.4);
  border-radius: 8px;
}
.peepbox-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(124, 58, 237, 0.7);
}

/* Persian numerals helper */
.persian-nums {
  font-feature-settings: "ss01";
}

/* Range slider for player */
input[type="range"].peep-range {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
}
input[type="range"].peep-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #7C3AED;
  box-shadow: 0 0 10px rgba(124, 58, 237, 0.6);
  border: none;
}
input[type="range"].peep-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #7C3AED;
  border: none;
}

/* Skeleton shimmer */
@keyframes shimmer {
  0% { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}
.shimmer {
  background: linear-gradient(90deg, #121A29 0%, #1a2438 50%, #121A29 100%);
  background-size: 1000px 100%;
  animation: shimmer 2s infinite linear;
}

/* Card hover lift */
.card-lift {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}
.card-lift:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 20px 40px -15px rgba(124, 58, 237, 0.4);
}

/* Hero gradient text glow */
.hero-title {
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8);
}