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

@layer base {
  :root, .dark {
    --background: #676278;
    --background-dark: #605C71;
    --foreground: #FBF9FE;
    
    --card: #2B2538;
    --card-foreground: #FBF9FE;
    
    --popover: #2B2538;
    --popover-foreground: #FBF9FE;
    
    --primary: #6C5BB0;
    --primary-foreground: #FBF9FE;
    --primary-hover: #594D9F;
    --primary-pressed: #493D90;
    
    --secondary: #1F172B;
    --secondary-foreground: #C0B8D6;
    
    --muted: #3B3448;
    --muted-foreground: #8F89A5;
    
    --accent: #3B3448;
    --accent-foreground: #FBF9FE;
    
    --destructive: #d8644a;
    --destructive-foreground: #FBF9FE;
    
    --border: #473F55;
    --input: #473F55;
    --input-bg: #150E21;
    --overlay: #150E21;
    
    --ring: #594D9F;
    
    --radius: 0.625rem;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply text-foreground;
    background: linear-gradient(to bottom right, var(--background), var(--background-dark));
    background-attachment: fixed;
    min-height: 100vh;
  }
}