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

/* Critical Web Fonts - optimized for Speed Index */
@font-face {
  font-family: 'S-Core Dream';
  src: url('/fonts/s-core-dream.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: fallback; /* Changed from swap to fallback for faster Speed Index */
  unicode-range: U+AC00-D7AF, U+1100-11FF, U+3130-318F, U+A960-A97F, U+D7B0-D7FF;
}

@font-face {
  font-family: 'Poppins';
  src: url('/fonts/poppins.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: fallback; /* Changed from swap to fallback for faster Speed Index */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Noto Sans JP';
  src: url('/fonts/noto-sans-jp.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+3000-303F, U+3040-309F, U+30A0-30FF, U+FF00-FFEF, U+4E00-9FAF;
}

@font-face {
  font-family: 'Noto Sans SC';
  src: url('/fonts/noto-sans-sc.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+4E00-9FFF, U+3400-4DBF, U+20000-2A6DF, U+2A700-2B73F, U+2B740-2B81F, U+2B820-2CEAF, U+F900-FAFF, U+2F800-2FA1F;
}

/* K-pop Vibrant Design System - All colors MUST be HSL */

@layer base {
  :root {
    --background: 0 0% 0%;
    --foreground: 0 0% 98%;

    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;

    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;

    /* K-pop vibrant primary colors */
    --primary: 280 100% 70%;
    --primary-foreground: 0 0% 98%;
    --primary-glow: 280 100% 80%;

    --secondary: 320 100% 75%;
    --secondary-foreground: 0 0% 98%;

    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;

    --accent: 200 100% 70%;
    --accent-foreground: 0 0% 98%;

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

    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 280 100% 70%;

    /* K-pop themed gradients */
    --gradient-primary: linear-gradient(135deg, hsl(280 100% 70%), hsl(320 100% 75%));
    --gradient-secondary: linear-gradient(135deg, hsl(200 100% 70%), hsl(280 100% 70%));
    --gradient-hero: linear-gradient(135deg, hsl(280 100% 70%) 0%, hsl(320 100% 75%) 50%, hsl(200 100% 70%) 100%);
    --gradient-card: linear-gradient(145deg, hsl(240 10% 3.9%) 0%, hsl(240 8% 6%) 100%);
    --gradient-page-title: linear-gradient(135deg, hsl(0 0% 100%), hsl(120 100% 50%));

    /* Glowing effects */
    --glow-primary: 0 0 15px hsl(280 100% 70% / 0.6), 0 0 30px hsl(280 100% 70% / 0.4);
    --glow-secondary: 0 0 30px hsl(320 100% 75% / 0.6), 0 0 60px hsl(320 100% 75% / 0.4);
    --glow-accent: 0 0 30px hsl(200 100% 70% / 0.6), 0 0 60px hsl(200 100% 70% / 0.4);

    /* Smooth transitions */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    --radius: 0.5rem;

    --sidebar-background: 0 0% 98%;

    --sidebar-foreground: 240 5.3% 26.1%;

    --sidebar-primary: 240 5.9% 10%;

    --sidebar-primary-foreground: 0 0% 98%;

    --sidebar-accent: 240 4.8% 95.9%;

    --sidebar-accent-foreground: 240 5.9% 10%;

    --sidebar-border: 220 13% 91%;

    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
  }

  /* Reserve scrollbar space to prevent content shift */
  html {
    overflow-y: scroll;
  }

  /* Prevent scrollbar compensation when dialogs open */
  body[style*="overflow: hidden"] {
    padding-right: 0 !important;
  }

  /* Global multilingual font stack */
  html {
    font-family: 'S-Core Dream', 'Poppins', 'Noto Sans JP', 'Noto Sans SC', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  }

  /* Language-specific font optimization */
  :lang(ko) {
    font-family: 'S-Core Dream', sans-serif;
  }

  :lang(en) {
    font-family: 'Poppins', sans-serif;
  }

  :lang(ja) {
    font-family: 'Noto Sans JP', sans-serif;
  }

  :lang(zh) {
    font-family: 'Noto Sans SC', sans-serif;
  }

  /* Apply Poppins to all English text */
  .font-poppins {
    font-family: 'Poppins', sans-serif;
  }

  /* Fix for persistent hover states on touch devices */
  @media (hover: none) {
    .widget-hover:hover {
      transform: none !important;
    }
  }

  /* Widget touch interaction for mobile */
  .widget-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  @media (hover: hover) {
    .widget-hover:hover {
      transform: scale(1.05);
    }
  }

  .widget-hover:active {
    transform: scale(0.98);
  }

  /* Slide animations for concept photo modal */
  @keyframes slide-out-left {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(-100%); opacity: 0; }
  }

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

  @keyframes slide-in {
    from { transform: translateX(0); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
  }

  .animate-slide-out-left {
    animation: slide-out-left 0.3s ease-out forwards;
  }

  .animate-slide-out-right {
    animation: slide-out-right 0.3s ease-out forwards;
  }

  .animate-slide-in {
    animation: slide-in 0.3s ease-out forwards;
  }
}