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

/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. 
All colors MUST be HSL.
*/

@layer base {
  :root {
    /* Light mode colors - Gold Premium Theme */
    --background: 0 0% 100%;
    --foreground: 30 30% 15%;

    --card: 0 0% 98%;
    --card-foreground: 30 30% 15%;

    --popover: 0 0% 98%;
    --popover-foreground: 30 30% 15%;

    --primary: 45 80% 48%;
    --primary-foreground: 30 30% 15%;

    --secondary: 30 40% 45%;
    --secondary-foreground: 0 0% 100%;

    --muted: 45 20% 92%;
    --muted-foreground: 30 25% 35%;

    --accent: 45 90% 35%;
    --accent-foreground: 0 0% 100%;

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

    --border: 45 20% 85%;
    --input: 0 0% 100%;
    --ring: 45 80% 48%;

    --radius: 1rem;

    /* Casino theme specific colors - Light Gold */
    --glass-bg: 0 0% 100%;
    --glass-opacity: 0.95;
    --gradient-start: 45 60% 95%;
    --gradient-mid: 45 50% 93%;
    --gradient-end: 45 40% 91%;
    
    /* Gold effects */
    --gold-light: 45 70% 82%;
    --gold-classic: 45 80% 48%;
    --gold-dark: 45 90% 35%;
    --gold-vivid: 51 100% 50%;
    
    /* Wager colors */
    --wager-excellent: 142 76% 36%;
    --wager-good: 47 96% 53%;
    --wager-medium: 25 95% 53%;
    --wager-high: 0 84% 60%;
  }

  .dark {
    /* Dark mode colors - Gold Premium Theme */
    --background: 0 0% 5%;
    --foreground: 45 15% 95%;

    --card: 0 0% 8%;
    --card-foreground: 45 15% 95%;

    --popover: 0 0% 8%;
    --popover-foreground: 45 15% 95%;

    --primary: 45 70% 82%;
    --primary-foreground: 30 30% 15%;

    --secondary: 30 40% 45%;
    --secondary-foreground: 0 0% 100%;

    --muted: 0 0% 15%;
    --muted-foreground: 45 15% 65%;

    --accent: 51 100% 50%;
    --accent-foreground: 30 30% 15%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    --border: 0 0% 18%;
    --input: 0 0% 12%;
    --ring: 51 100% 50%;

    /* Casino theme specific colors - Dark Gold */
    --glass-bg: 0 0% 100%;
    --glass-opacity: 0.06;
    --gradient-start: 0 0% 5%;
    --gradient-mid: 0 0% 6%;
    --gradient-end: 0 0% 4%;
  }
}

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

  body {
    @apply bg-background text-foreground;
    background: linear-gradient(180deg, hsl(var(--gradient-start)) 0%, hsl(var(--gradient-mid)) 50%, hsl(var(--gradient-end)) 100%);
    background-attachment: fixed;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
  }
}

@layer utilities {
  .glass-card {
    background: rgba(250, 247, 240, var(--glass-opacity));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(212, 175, 55, 0.2);
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.15);
    will-change: transform;
    transform: translateZ(0);
    content-visibility: auto;
    contain: layout style paint;
  }
  
  /* Variant without paint/layout containment for overlays (e.g., nav dropdowns) */
  .glass-card-overlay {
    background: rgba(250, 247, 240, var(--glass-opacity));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(212, 175, 55, 0.2);
    overflow: visible;
  }
  
  .text-gradient {
    background: linear-gradient(135deg, hsl(var(--gold-dark)) 0%, hsl(var(--gold-classic)) 50%, hsl(var(--gold-light)) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  .bce-btn-premium {
    background: linear-gradient(135deg, hsl(var(--gold-light)) 0%, hsl(var(--gold-classic)) 50%, hsl(var(--gold-dark)) 100%);
    color: hsl(var(--foreground));
    font-weight: 700;
    border: 2px solid hsl(var(--primary));
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.15);
    transition: all 0.3s ease;
  }
  
  .bce-btn-premium:hover {
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.4);
    transform: scale(1.05);
  }
  
  .bce-shine {
    position: relative;
    overflow: hidden;
  }
  
  .bce-shine::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
      45deg,
      transparent,
      rgba(255, 255, 255, 0.1),
      transparent
    );
    animation: shine 3s infinite;
  }
  
  @keyframes shine {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
  }

  /* Optimize animations to use GPU acceleration */
  .animate-fade-in,
  .animate-fade-in-up,
  .animate-glow {
    will-change: transform, opacity;
    transform: translateZ(0);
  }

  /* Optimize hover transitions */
  .hover\:scale-\[1\.02\]:hover,
  .hover\:scale-105:hover {
    will-change: transform;
  }
}

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

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

/* Non-render-blocking large sections */
@layer utilities {
  .cv-auto {
    content-visibility: auto;
    contain-intrinsic-size: 1000px;
  }
}