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

@layer base {
  :root {
    /* Main color palette - Light mode */
    --primary-50: 0 0% 98%;
    --primary-100: 0 0% 90%;
    --primary-200: 0 0% 80%;
    --primary-300: 0 0% 70%;
    --primary-400: 0 0% 50%;
    --primary-500: 0 0% 30%;
    --primary-600: 0 0% 20%;
    --primary-700: 0 0% 15%;
    --primary-800: 0 0% 10%;
    --primary-900: 0 0% 5%;

    --secondary-50: 220 100% 95%;
    --secondary-100: 220 90% 90%;
    --secondary-200: 220 80% 80%;
    --secondary-300: 220 70% 70%;
    --secondary-400: 220 60% 60%;
    --secondary-500: 220 50% 50%;
    --secondary-600: 220 50% 40%;
    --secondary-700: 220 50% 30%;
    --secondary-800: 220 50% 20%;
    --secondary-900: 220 50% 10%;

    --neutral-50: 0 0% 98%;
    --neutral-100: 0 0% 94%;
    --neutral-200: 0 0% 88%;
    --neutral-300: 0 0% 80%;
    --neutral-400: 0 0% 70%;
    --neutral-500: 0 0% 60%;
    --neutral-600: 0 0% 50%;
    --neutral-700: 0 0% 40%;
    --neutral-800: 0 0% 20%;
    --neutral-900: 0 0% 10%;

    /* UI Element Colors */
    --background: 0 0% 100%;
    --foreground: 0 0% 10%;
    
    --card: 0 0% 100%;
    --card-foreground: 0 0% 10%;
    
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 10%;
    
    --primary: var(--primary-500);
    --primary-foreground: 0 0% 100%;
    
    --secondary: var(--secondary-500);
    --secondary-foreground: 0 0% 100%;
    
    --muted: var(--neutral-100);
    --muted-foreground: var(--neutral-600);
    
    --accent: var(--primary-100);
    --accent-foreground: var(--primary-900);
    
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 100%;
    
    --border: var(--neutral-200);
    --input: var(--neutral-300);
    --ring: var(--primary-500);
    
    /* Chart Colors */
    --chart-1: var(--primary-500);
    --chart-2: var(--secondary-500);
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    
    --radius: 0.5rem;
  }
  
  .dark {
    /* Main color palette - Dark mode */
    --primary-50: 0 0% 95%;
    --primary-100: 0 0% 90%;
    --primary-200: 0 0% 80%;
    --primary-300: 0 0% 70%;
    --primary-400: 0 0% 60%;
    --primary-500: 0 0% 50%;
    --primary-600: 0 0% 40%;
    --primary-700: 0 0% 30%;
    --primary-800: 0 0% 20%;
    --primary-900: 0 0% 10%;

    --secondary-50: 220 30% 95%;
    --secondary-100: 220 30% 90%;
    --secondary-200: 220 30% 80%;
    --secondary-300: 220 30% 70%;
    --secondary-400: 220 30% 60%;
    --secondary-500: 220 30% 50%;
    --secondary-600: 220 30% 40%;
    --secondary-700: 220 30% 30%;
    --secondary-800: 220 30% 20%;
    --secondary-900: 220 30% 10%;

    --neutral-50: 0 0% 95%;
    --neutral-100: 0 0% 85%;
    --neutral-200: 0 0% 75%;
    --neutral-300: 0 0% 65%;
    --neutral-400: 0 0% 55%;
    --neutral-500: 0 0% 45%;
    --neutral-600: 0 0% 35%;
    --neutral-700: 0 0% 25%;
    --neutral-800: 0 0% 15%;
    --neutral-900: 0 0% 10%;

    /* UI Element Colors */
    --background: 0 0% 10%;
    --foreground: 0 0% 95%;
    
    --card: 0 0% 15%;
    --card-foreground: 0 0% 95%;
    
    --popover: 0 0% 15%;
    --popover-foreground: 0 0% 95%;
    
    --primary: var(--primary-400);
    --primary-foreground: 0 0% 95%;
    
    --secondary: var(--secondary-400);
    --secondary-foreground: 0 0% 10%;
    
    --muted: var(--neutral-800);
    --muted-foreground: var(--neutral-400);
    
    --accent: var(--primary-800);
    --accent-foreground: var(--primary-100);
    
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 95%;
    
    --border: var(--neutral-700);
    --input: var(--neutral-700);
    --ring: var(--primary-400);
    
    /* Chart Colors */
    --chart-1: var(--primary-400);
    --chart-2: var(--secondary-400);
    --chart-3: 197 50% 50%;
    --chart-4: 43 80% 70%;
    --chart-5: 27 90% 70%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
  
  /* Typography utilities */
  .text-display-2xl { @apply text-display-2xl font-bold; }
  .text-display-xl { @apply text-display-xl font-bold; }
  .text-display-lg { @apply text-display-lg font-semibold; }
  .text-display-md { @apply text-display-md font-semibold; }
  .text-display-sm { @apply text-display-sm font-medium; }
  .text-display-xs { @apply text-display-xs font-medium; }
  
  .text-body-xl { @apply text-body-xl; }
  .text-body-lg { @apply text-body-lg; }
  .text-body-md { @apply text-body-md; }
  .text-body-sm { @apply text-body-sm; }
  .text-body-xs { @apply text-body-xs; }
  
  .text-label-lg { @apply text-label-lg; }
  .text-label-md { @apply text-label-md; }
  .text-label-sm { @apply text-label-sm; }
}