@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 {
    /* Rocha Sales Brand Colors - Light Mode */
    --background: 210 11% 97%;
    --foreground: 0 0% 10%;
    
    --card: 0 0% 100%;
    --card-foreground: 0 0% 10%;

    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 10%;

    /* Gold Palette */
    --primary: 40 48% 60%;
    --primary-foreground: 220 15% 5%;
    --primary-strong: 40 52% 47%;
    --primary-soft: 40 60% 75%;
    
    /* Secondary Colors */
    --secondary: 225 11% 8%;
    --secondary-foreground: 210 11% 97%;
    
    /* Accent */
    --accent: 40 52% 47%;
    --accent-foreground: 210 11% 97%;
    --accent-green: 142 70% 49%;

    /* Neutral Tones */
    --muted: 210 11% 95%;
    --muted-foreground: 0 0% 45%;

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

    --border: 40 60% 75%;
    --input: 0 0% 90%;
    --ring: 40 52% 47%;

    --radius: 0.75rem;

    /* Custom Design Tokens */
    --gradient-gold: linear-gradient(135deg, hsl(40 60% 75%) 0%, hsl(40 48% 60%) 100%);
    --gradient-gold-metallic: linear-gradient(135deg, hsl(40 52% 47%) 0%, hsl(40 48% 60%) 50%, hsl(40 60% 75%) 100%);
    --gradient-dark-gold: linear-gradient(135deg, hsl(220 15% 5%) 0%, hsl(40 48% 60%) 100%);
    
    --shadow-gold: 0 4px 12px hsl(40 48% 60% / 0.3);
    --shadow-gold-lg: 0 8px 24px hsl(40 52% 47% / 0.4);
    --shadow-elegant: 0 2px 8px hsl(0 0% 0% / 0.08);
    
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-theme: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  }

  .dark {
    /* Dark Mode - Premium Black & Gold */
    --background: 220 15% 5%;
    --foreground: 210 11% 97%;

    --card: 225 11% 8%;
    --card-foreground: 210 11% 97%;

    --popover: 220 15% 5%;
    --popover-foreground: 210 11% 97%;

    --primary: 40 48% 60%;
    --primary-foreground: 220 15% 5%;
    --primary-strong: 40 52% 47%;
    --primary-soft: 40 60% 75%;

    --secondary: 225 11% 8%;
    --secondary-foreground: 210 11% 97%;

    --accent: 40 48% 60%;
    --accent-foreground: 220 15% 5%;
    --accent-green: 142 70% 49%;

    --muted: 225 11% 15%;
    --muted-foreground: 0 0% 65%;

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

    --border: 40 48% 60% / 0.2;
    --input: 0 0% 20%;
    --ring: 40 48% 60%;

    /* Dark mode shadows */
    --shadow-gold: 0 10px 40px -10px hsl(40 48% 60% / 0.5);
    --shadow-gold-lg: 0 20px 60px -15px hsl(40 48% 60% / 0.6);
    --shadow-elegant: 0 4px 20px hsl(0 0% 0% / 0.3);
    
    --gradient-gold-metallic: linear-gradient(135deg, hsl(40 60% 75% / 0.1) 0%, hsl(40 48% 60%) 50%, hsl(40 52% 47%) 100%);
  }
}

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

  body {
    @apply bg-background text-foreground font-sans;
    transition: var(--transition-theme);
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-display text-primary;
    transition: color 0.3s ease;
  }
  
  .card {
    transition: var(--transition-theme);
  }
}

@layer utilities {
  .text-gradient-gold {
    @apply bg-gradient-to-r from-primary-soft to-primary-strong bg-clip-text text-transparent;
  }
  
  .hover-lift {
    @apply transition-all duration-300 hover:-translate-y-1;
    &:hover {
      box-shadow: 0 10px 40px -10px hsl(40 48% 58% / 0.4);
    }
  }
  
  .gold-border {
    @apply border-2 border-primary/20 hover:border-primary transition-colors duration-300;
  }
  
  .scroll-smooth {
    scroll-behavior: smooth;
  }
}