/* Tokens couleur et radius (clairs) */
:root {
  --background: 0 0% 100%;
  --foreground: 0 0% 9%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 9%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 9%;
  --primary: 0 0% 9%;
  --primary-foreground: 0 0% 98.5%;
  --secondary: 0 0% 97%;
  --secondary-foreground: 0 0% 20.5%;
  --muted: 0 0% 97%;
  --muted-foreground: 0 0% 55.6%;
  --accent: 0 0% 97%;
  --accent-foreground: 0 0% 20.5%;
  --destructive: 27.325 24.5% 57.7%;
  --destructive-foreground: 27.325 24.5% 57.7%;
  --border: 0 0% 92.2%;
  --input: 0 0% 92.2%;
  --ring: 0 0% 70.8%;
  --radius: 10px;
}

/* Thème sombre */
.dark {
  --background: 0 0% 14.5%;
  --foreground: 0 0% 98.5%;
  --card: 0 0% 14.5%;
  --card-foreground: 0 0% 98.5%;
  --popover: 0 0% 14.5%;
  --popover-foreground: 0 0% 98.5%;
  --primary: 0 0% 98.5%;
  --primary-foreground: 0 0% 20.5%;
  --secondary: 0 0% 26.9%;
  --secondary-foreground: 0 0% 98.5%;
  --muted: 0 0% 26.9%;
  --muted-foreground: 0 0% 70.8%;
  --accent: 0 0% 26.9%;
  --accent-foreground: 0 0% 98.5%;
  --destructive: 25.723 14.1% 39.6%;
  --destructive-foreground: 25.331 23.7% 63.7%;
  --border: 0 0% 26.9%;
  --input: 0 0% 26.9%;
  --ring: 0 0% 43.9%;
}

.bg-background { background-color: hsl(var(--background)); }
.text-foreground { color: hsl(var(--foreground)); }
.bg-card { background-color: hsl(var(--card)); }
.text-muted-foreground { color: #6b7280; }
.bg-primary { background-color: hsl(var(--primary)); }
.text-primary-foreground { color: hsl(var(--primary-foreground)); }
.bg-accent { background-color: hsl(var(--accent)); }
.text-accent-foreground { color: hsl(var(--accent-foreground)); }
.border { border: 1px solid hsl(var(--border)); }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.container { max-width: 1280px; margin: 0 auto; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.shadow { box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.shadow-lg { box-shadow: 0 8px 20px rgba(0,0,0,0.12); }

/* Base utilitaire pour body si non stylé via Tailwind */
body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); }
/* CSS Variables et styles personnalisés pour NGRadio */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Signika:wght@300;400;500;600;700&display=swap');

:root {
  /* Updated to use NG blue #6E76EE as primary color */
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 240 10% 3.9%;

  /* NG blue (#6E76EE) for primary accent */
  --primary: 237 79% 68%;
  --primary-foreground: 0 0% 98%;

  --secondary: 240 4.8% 95.9%;
  --secondary-foreground: 240 5.9% 10%;

  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;

  /* Soft pink for accent */
  --accent: 340 75% 68%;
  --accent-foreground: 0 0% 98%;

  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;

  --border: 240 5.9% 90%;
  --input: 240 5.9% 90%;
  --ring: 237 79% 68%;

  --chart-1: 237 79% 68%;
  --chart-2: 340 75% 68%;
  --chart-3: 142 76% 36%;
  --chart-4: 47 96% 53%;
  --chart-5: 280 65% 60%;

  --radius: 0.75rem;
}

.dark {
  --background: oklch(0.12 0.015 240);
  --foreground: oklch(0.98 0.002 240);
  --card: oklch(0.16 0.015 240);
  --card-foreground: oklch(0.98 0.002 240);
  --popover: oklch(0.16 0.015 240);
  --popover-foreground: oklch(0.98 0.002 240);

  --primary: oklch(0.62 0.19 265);
  --primary-foreground: oklch(0.99 0 0);

  --secondary: oklch(0.2 0.015 240);
  --secondary-foreground: oklch(0.98 0.002 240);

  --muted: oklch(0.2 0.015 240);
  --muted-foreground: oklch(0.6 0.01 240);

  --accent: oklch(0.7 0.16 340);
  --accent-foreground: oklch(0.99 0 0);

  --destructive: oklch(0.5 0.25 27);
  --destructive-foreground: oklch(0.99 0 0);

  --border: oklch(0.25 0.015 240);
  --input: oklch(0.25 0.015 240);
  --ring: oklch(0.62 0.19 265);

  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

@theme inline {
  --font-sans: "Inter", "Geist", "Geist Fallback", system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", "Geist Mono Fallback", monospace;
  /* Adding heading font family */
  --font-heading: "Signika", "Inter", system-ui, sans-serif;
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --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-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --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);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --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);
}

@layer base {
  * {
    border-color: hsl(var(--border));
  }
  body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
  }
  /* All headings use the Signika font */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: 'Signika', 'Inter', system-ui, sans-serif;
    font-weight: 700;
  }
}

/* Adding custom keyframe animations for shimmer, float, and pulse effects */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes pulse-slow {
  0%,
  100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

@keyframes slide-in-left {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-in-right {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes bounce-subtle {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

.animate-shimmer {
  animation: shimmer 3s linear infinite;
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-pulse-slow {
  animation: pulse-slow 3s ease-in-out infinite;
}

.animate-bounce-subtle {
  animation: bounce-subtle 2s ease-in-out infinite;
}

/* Gradient utilities (Tailwind-like, no build required) */
/* Colors based on CSS variables defined above */
:
.bg-linear-to-r {
  background-image: linear-gradient(to right, hsl(var(--primary)), hsl(var(--accent)));
}
.bg-linear-to-br {
  background-image: linear-gradient(to bottom right, hsl(var(--primary)), hsl(var(--accent)));
}
.bg-linear-to-t {
  background-image: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0));
}

/* Support for light panel gradient used on the radio player */
.from-primary\/10.via-background.to-accent\/10.bg-linear-to-br,
.bg-linear-to-br.from-primary\/10.via-background.to-accent\/10 {
  background-image: linear-gradient(
    to bottom right,
    color-mix(in hsl, hsl(var(--primary)) 10%, transparent),
    hsl(var(--background)),
    color-mix(in hsl, hsl(var(--accent)) 10%, transparent)
  );
}

/* Text gradient helpers */
.bg-clip-text {
  -webkit-background-clip: text;
  background-clip: text;
}
.text-transparent {
  color: transparent;
}

/* Convenience classes for common components */
.gradient-panel {
  background-image: linear-gradient(
    to bottom right,
    color-mix(in hsl, hsl(var(--primary)) 10%, transparent),
    hsl(var(--background)),
    color-mix(in hsl, hsl(var(--accent)) 10%, transparent)
  );
}
.gradient-pill {
  background-image: linear-gradient(to right, hsl(var(--primary)), hsl(var(--accent)));
}
.text-gradient {
  background-image: linear-gradient(to right, hsl(var(--primary)), hsl(var(--accent)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.button-gradient {
  background-image: linear-gradient(to bottom right, hsl(var(--primary)), hsl(var(--accent)));
}
.overlay-top-gradient {
  background-image: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0));
}