/* ==========================================================================
   IPTV Alberta — Base stylesheet
   Design tokens, fonts, keyframes and the "elevate" hover/active system.
   Utility classes (layout, spacing, color, typography) live in tailwind.css,
   which is compiled from the classes used across these HTML pages.
   ========================================================================== */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-variable.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/inter-variable.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-variable.woff2') format('woff2');
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-marquee {
  animation: marquee 40s linear infinite;
}

.animate-marquee:hover {
  animation-play-state: paused;
}

@media (max-width: 480px) {
  .animate-marquee {
    animation-duration: 25s;
  }
}

@keyframes accordion-down {
  from { height: 0; }
  to { height: var(--radix-accordion-content-height, auto); }
}

@keyframes accordion-up {
  from { height: var(--radix-accordion-content-height, auto); }
  to { height: 0; }
}

:root {
  --button-outline: rgba(255,255,255, .10);
  --badge-outline: rgba(255,255,255, .05);
  --opaque-button-border-intensity: 9;
  --elevate-1: rgba(255,255,255, .04);
  --elevate-2: rgba(255,255,255, .09);
  --background: 230 25% 3%;
  --foreground: 220 15% 93%;
  --border: 230 18% 12%;
  --card: 230 22% 6%;
  --card-foreground: 220 15% 93%;
  --card-border: 230 18% 10%;
  --popover: 230 22% 8%;
  --popover-foreground: 220 15% 93%;
  --popover-border: 230 18% 14%;
  --primary: 4 80% 56%;
  --primary-foreground: 0 0% 100%;
  --secondary: 230 18% 12%;
  --secondary-foreground: 220 15% 93%;
  --muted: 230 15% 10%;
  --muted-foreground: 230 10% 72%;
  --accent: 230 22% 14%;
  --accent-foreground: 220 15% 88%;
  --destructive: 0 75% 45%;
  --destructive-foreground: 0 0% 98%;
  --input: 230 18% 16%;
  --ring: 4 80% 56%;
  --font-sans: 'Space Grotesk', sans-serif;
  --font-serif: Georgia, serif;
  --font-mono: 'JetBrains Mono', monospace;
  --radius: .5rem;
  --shadow-xs: 0px 2px 0px 0px hsl(0 0% 100% / 0.00);
  --shadow-sm: 0px 2px 0px 0px hsl(0 0% 100% / 0.00), 0px 1px 2px -1px hsl(0 0% 100% / 0.05);
  --shadow: 0px 2px 0px 0px hsl(0 0% 100% / 0.00), 0px 1px 2px -1px hsl(0 0% 100% / 0.08);
  --shadow-md: 0px 2px 0px 0px hsl(0 0% 100% / 0.00), 0px 2px 4px -1px hsl(0 0% 100% / 0.10);
  --shadow-lg: 0px 2px 0px 0px hsl(0 0% 100% / 0.00), 0px 4px 6px -1px hsl(0 0% 100% / 0.12);
  --shadow-xl: 0px 2px 0px 0px hsl(0 0% 100% / 0.00), 0px 8px 10px -1px hsl(0 0% 100% / 0.15);

  --primary-border: hsl(4 80% 65%);
  --secondary-border: hsl(230 18% 21%);
  --accent-border: hsl(230 22% 23%);
  --muted-border: hsl(230 15% 19%);
  --destructive-border: hsl(0 75% 54%);
}

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  overflow-x: clip;
  -webkit-tap-highlight-color: transparent;
}

* {
  border-color: hsl(var(--border));
}

input[type="search"]::-webkit-search-cancel-button {
  display: none;
}

/* Elevate system: automatic contrast adjustment on hover/active for
   interactive surfaces (buttons, badges, cards). */
.hover-elevate,
.active-elevate,
.hover-elevate-2,
.active-elevate-2 {
  position: relative;
  z-index: 0;
}

.hover-elevate::after,
.active-elevate::after,
.hover-elevate-2::after,
.active-elevate-2::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 999;
}

.hover-elevate:hover::after,
.active-elevate:active::after {
  background-color: var(--elevate-1);
}

.hover-elevate-2:hover::after,
.active-elevate-2:active::after {
  background-color: var(--elevate-2);
}

.border.hover-elevate::after,
.border.active-elevate::after,
.border.hover-elevate-2::after,
.border.active-elevate-2::after {
  inset: -1px;
}