@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* Light theme - based on your color scheme */

    /* Main background and foreground */
    --background: 350 59% 98%; /* FDF7F8 - main background */
    --foreground: 351 34% 30%; /* 5D3A3F - main text */

    /* Muted elements */
    --muted: 350 40% 93%; /* F8E8EA - muted background */
    --muted-foreground: 350 30% 45%; /* Lighter version of main text */

    /* Popover and card */
    --popover: 0 0% 100%; /* FFFFFF - popover background */
    --popover-foreground: 351 34% 30%; /* 5D3A3F - popover text */
    --card: 0 0% 100%; /* FFFFFF - card background */
    --card-foreground: 351 34% 30%; /* 5D3A3F - card text */

    /* Border and input */
    --border: 350 30% 85%; /* Derived border color */
    --input: 350 30% 85%; /* Input background */

    /* Primary actions */
    --primary: 350 70% 50%; /* C8394F - primary button */
    --primary-foreground: 0 0% 100%; /* FFFFFF - text on primary */

    /* Secondary elements */
    --secondary: 350 40% 93%; /* F8E8EA - secondary background */
    --secondary-foreground: 351 34% 30%; /* 5D3A3F - text on secondary */

    /* Accent elements */
    --accent: 350 70% 40%; /* A12D3E - accent color */
    --accent-foreground: 0 0% 100%; /* FFFFFF - text on accent */

    /* Destructive actions */
    --destructive: 350 70% 55%; /* D63C56 - error/destroy */
    --destructive-foreground: 0 0% 100%; /* FFFFFF - text on destructive */

    /* Focus ring */
    --ring: 350 70% 50%; /* C8394F - focus ring */

    /* Surface colors */
    --surface-1: 350 40% 93%; /* F8E8EA - surface 1 */
    --surface-2: 350 35% 88%; /* Derived surface 2 */

    /* Mantle */
    --mantle: 350 59% 98%; /* FDF7F8 - mantle */

    /* Radius */
    --radius: 0.5rem;

    /* Sidebar specific */
    --sidebar-background: 350 59% 98%; /* FDF7F8 - sidebar bg */
    --sidebar-foreground: 351 34% 30%; /* 5D3A3F - sidebar text */
    --sidebar-primary: 350 70% 50%; /* C8394F - sidebar primary */
    --sidebar-primary-foreground: 0 0% 100%; /* FFFFFF - text on sidebar primary */
    --sidebar-accent: 350 40% 93%; /* F8E8EA - sidebar accent */
    --sidebar-accent-foreground: 351 34% 30%; /* 5D3A3F - text on sidebar accent */
    --sidebar-border: 350 30% 85%; /* Derived border */
    --sidebar-ring: 350 70% 50%; /* C8394F - sidebar focus ring */
  }

  .dark {
    /* Dark theme - based on your color scheme */

    /* Main background and foreground */
    --background: 350 20% 15%; /* 2A1F21 - main background */
    --foreground: 350 30% 92%; /* F5E6E8 - main text */

    /* Muted elements */
    --muted: 350 20% 25%; /* 4A2D31 - muted background */
    --muted-foreground: 350 30% 75%; /* Lighter version of main text */

    /* Popover and card */
    --popover: 350 20% 15%; /* 2A1F21 - popover background */
    --popover-foreground: 350 30% 92%; /* F5E6E8 - popover text */
    --card: 350 20% 15%; /* 2A1F21 - card background */
    --card-foreground: 350 30% 92%; /* F5E6E8 - card text */

    /* Border and input */
    --border: 350 20% 35%; /* Derived border color */
    --input: 350 20% 35%; /* Input background */

    /* Primary actions */
    --primary: 350 100% 75%; /* FF7A8A - primary button */
    --primary-foreground: 350 20% 15%; /* 2A1F21 - text on primary */

    /* Secondary elements */
    --secondary: 350 20% 25%; /* 4A2D31 - secondary background */
    --secondary-foreground: 350 30% 92%; /* F5E6E8 - text on secondary */

    /* Accent elements */
    --accent: 350 100% 80%; /* FF9AAA - accent color */
    --accent-foreground: 350 20% 15%; /* 2A1F21 - text on accent */

    /* Destructive actions */
    --destructive: 350 100% 70%; /* FF6B7D - error/destroy */
    --destructive-foreground: 350 20% 15%; /* 2A1F21 - text on destructive */

    /* Focus ring */
    --ring: 350 100% 75%; /* FF7A8A - focus ring */

    /* Surface colors */
    --surface-1: 350 20% 25%; /* 4A2D31 - surface 1 */
    --surface-2: 350 20% 35%; /* Derived surface 2 */

    /* Mantle */
    --mantle: 350 20% 12%; /* 1F1617 - mantle */

    /* Radius */
    --radius: 0.5rem;

    /* Sidebar specific */
    --sidebar-background: 350 20% 12%; /* 1F1617 - sidebar bg */
    --sidebar-foreground: 350 30% 92%; /* F5E6E8 - sidebar text */
    --sidebar-primary: 350 100% 75%; /* FF7A8A - sidebar primary */
    --sidebar-primary-foreground: 350 20% 15%; /* 2A1F21 - text on sidebar primary */
    --sidebar-accent: 350 20% 25%; /* 4A2D31 - sidebar accent */
    --sidebar-accent-foreground: 350 30% 92%; /* F5E6E8 - text on sidebar accent */
    --sidebar-border: 350 20% 35%; /* Derived border */
    --sidebar-ring: 350 100% 75%; /* FF7A8A - sidebar focus ring */
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
  
  .scrollbar-hide::-webkit-scrollbar { display: none; }
  .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
}

h1 {
  @apply scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl;
}

h2 {
  @apply scroll-m-20 pb-2 text-3xl font-semibold tracking-tight first:mt-0;
}

media-controller {
  --media-primary-color: #ffffff;
  --media-secondary-color: transparent;
  --media-control-background: transparent;
  --media-control-hover-background: hsla(var(--primary), 0.4);
  
  /* Range colors */
  --media-range-track-background: hsla(0, 0%, 100%, 0.3);
  --media-range-bar-color: hsl(var(--primary));
  --media-range-thumb-background: hsl(var(--primary));
  --media-range-thumb-border-radius: 50%;
  --media-range-thumb-height: 12px;
  --media-range-thumb-width: 12px;
  --media-range-track-height: 4px;
  
  /* Layout & structure */
  border-radius: calc(var(--radius) * 1.5);
  overflow: hidden;
  border: 1px solid hsla(var(--border), 0.2);
  background-color: #000;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.3);
}

media-control-bar {
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
  backdrop-filter: blur(4px);
  -webkit-mask-image: linear-gradient(to top, black 50%, transparent 100%);
  mask-image: linear-gradient(to top, black 50%, transparent 100%);
  width: 100%;
  box-sizing: border-box;
  justify-content: space-between;
  padding: 2rem 0.75rem 0.75rem;
  align-items: center;
}

media-time-range {
  --media-preview-background: hsla(var(--card), 0.95);
  --media-preview-border-radius: var(--radius);
  --media-time-display-color: hsl(var(--foreground));
}

media-time-display {
  --media-text-color: #ffffff;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
}

media-controller::part(centered-layer) {
  background-color: transparent;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

media-controller:not([mediapaused])[userinactive]::part(centered-layer) {
  opacity: 0;
  transition: opacity 0.8s ease;
}

media-loading-indicator {
  --media-loading-icon-width: 56px;
  --media-loading-icon-height: 56px;
  --media-loading-icon-color: hsl(var(--primary));
  filter: drop-shadow(0 0 8px hsla(var(--primary), 0.4));
}

media-play-button,
media-mute-button,
media-fullscreen-button,
media-chrome-button {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: var(--radius);
  margin: 0 2px;
}

media-play-button:hover,
media-mute-button:hover,
media-fullscreen-button:hover,
media-chrome-button:hover {
  transform: scale(1.1);
  --media-control-background: hsla(var(--primary), 0.85);
  --media-button-icon-color: #ffffff;
}

/* A pulse animation for the live/retry indicator if needed */
@keyframes stream-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.stream-live-indicator {
  animation: stream-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

media-volume-range {
  width: 90px;
  height: 40px; /* Aligns with standard media button heights */
}