:root {
  --padding-x: 3rem;
  --padding-y: 5rem;
  --radius: 8px;
  --ls-text-white: #fff;
  --ls-text-body: #D1D0CF;
  --ls-text-dark: #fff;
  --ls-primary: #e50914;
  --ls-primary-hover: #b70710;
  --ls-body-bg:#000;
  --ls-card-bg-color:#141314;
  --ls-body-bg-white: #fff;
  --ls-border-color: #495057;
  --card-desc-min-height: 3rem;
  --gap-sm: 10px;
  --gap-md: 20px;
  --font-size-sm: 0.85rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.5rem;
  --bg-dark-rgb: 0, 0, 0;
  --ls-media-text: #fff;
  --ls-media-primary: #e50914;
  --ls-ad-text-body: #D1D0CF;
  --ls-ad-text-dark: #fff;
  --ls-ad-primary: #e50914;
  --ls-ad-primary-hover: #b70710;
  --ls-ad-text-btn:#fff;
  --ls-ad-card-bg-color:#141314;
  
  /* Slider aspect ratios */
  --ls-banner-aspect-ratio: 16/6;
  --ls-card-aspect-ratio: 1.5/1;
  --ls-term-card-aspect-ratio: 16/9;

  /* Layout Variables */
 --channel-width: clamp(120px, 15vw, 200px);
 --time-slot-width: 250px;
 --header-height: 60px;
 --date-picker-height: 50px;
 --spacing-base: clamp(8px, 1vw, 15px);
 --font-size-base: clamp(11px, 1vw, 18px);
 --image-size-base: clamp(40px, 8vw, 110px);
 --base-font-size: 16px;
 --title-font-size: clamp(14px, 1.8vw, 18px);
 --time-font-size: clamp(12px, 1.2vw, 14px);
 --category-font-size: clamp(11px, 1vw, 12px);
 --logo-size: clamp(50px, 8vw, 80px);
 --program-image-size: clamp(60px, 10vw, 110px);

  --current-program-gradient-start: #510004;
 --current-program-gradient-end: #080808;

 --shadow-light: rgba(0, 0, 0, 0.1);
 --shadow-medium: rgba(0, 0, 0, 0.3);
 --shadow-dark: rgba(0, 0, 0, 0.5);
 --shadow-darker: rgba(0, 0, 0, 0.7);
 --shadow-darkest: rgba(0, 0, 0, 0.8);
}

@media (max-width: 1199.98px) {
  :root {
    --padding-x: 2rem;
    --padding-y: 3rem;
    --ls-banner-aspect-ratio: 7/6;
  }
}

@media (max-width: 767.98px) {
  :root {
    --padding-x: 1rem;
    --padding-y: 2rem;
    --ls-banner-aspect-ratio: 7/6;
  }
}