@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@layer base {
  :root, .dark {
    /* Deeper premium dark mode background */
    --background: #120D1C; 
    --background-dark: #0A0710;
    --foreground: #FBF9FE;
    
    --card: #1F172B;
    --card-foreground: #FBF9FE;
    
    --popover: #1F172B;
    --popover-foreground: #FBF9FE;
    
    --primary: #6C5BB0;
    --primary-foreground: #FFFFFF;
    --primary-hover: #594D9F;
    --primary-pressed: #493D90;
    
    --secondary: #2B2538;
    --secondary-foreground: #C0B8D6;
    
    --muted: #3B3448;
    --muted-foreground: #8F89A5;
    
    --accent: #3B3448;
    --accent-foreground: #FBF9FE;
    
    --destructive: #d8644a;
    --destructive-foreground: #FBF9FE;
    
    --border: #3B3448;
    --input: #3B3448;
    --input-bg: #1A1325;
    --overlay: #000000;
    
    --ring: #6C5BB0;
    
    --radius: 0.75rem;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply text-foreground;
    background: linear-gradient(135deg, var(--background), var(--background-dark));
    background-attachment: fixed;
    min-height: 100vh;
  }
  
  /* Fix for Chrome autofill turning inputs yellow/olive */
  input:-webkit-autofill,
  input:-webkit-autofill:hover, 
  input:-webkit-autofill:focus, 
  input:-webkit-autofill:active {
      -webkit-box-shadow: 0 0 0 30px var(--input-bg) inset !important;
      -webkit-text-fill-color: var(--foreground) !important;
      transition: background-color 5000s ease-in-out 0s;
  }
}