/* Brand tokens (edit these to customize the site quickly)
   Example to switch to a purple/orange theme:
   :root {
     --primary: 124 58 237;    // purple-600
     --on-primary: 255 255 255;
     --secondary: 251 146 60;  // orange-400
     --on-secondary: 0 0 0;
     --accent: 59 130 246;     // blue-500
     --on-accent: 255 255 255;
     --base: 255 255 255;      // surface background
     --on-base: 17 24 39;      // gray-900 text
     --surface: 248 250 252;   // slate-50
     --on-surface: 17 24 39;   // gray-900 text
   }
*/
:root {
  /* Default (indigo/cyan) — adjust as needed */
  --primary: 79 70 229;       /* indigo-600 */
  --on-primary: 255 255 255;

  --secondary: 14 165 233;    /* sky-500 */
  --on-secondary: 0 0 0;

  --accent: 6 182 212;        /* cyan-500 */
  --on-accent: 0 0 0;

  --base: 255 255 255;        /* white */
  --on-base: 17 24 39;        /* gray-900 */

  --surface: 248 250 252;     /* slate-50 */
  --on-surface: 17 24 39;     /* gray-900 */
}

@media (prefers-color-scheme: dark) {
  :root {
    --base: 9 11 17;          /* near-black */
    --on-base: 243 244 246;   /* gray-100 */

    --surface: 12 14 20;      /* dark card bg */
    --on-surface: 243 244 246;/* gray-100 */
  }
}

/* Light dark preference */
html.dark {
  --base: 9 11 17;
  --on-base: 243 244 246;

  --surface: 12 14 20;
  --on-surface: 243 244 246;
}

/* Smooth font rendering */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Navigation link styles */
.nav-link {
  @apply inline-block px-3 py-1.5 rounded-md text-surface-foreground/80 hover:bg-black/5 dark:hover:bg-white/5 hover:text-surface-foreground;
}

/* Utility to clamp lines for titles */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Subtle focus ring */
:focus-visible {
  outline: 2px solid rgb(var(--primary));
  outline-offset: 2px;
}

/* Cards hover lift */
.movie-item:hover {
  transform: translateY(-2px);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .movie-item, .group {
    transition: none !important;
  }
}