@import "tailwindcss";

@layer base {

  :root {
    /* Catppuccin Latte */
    --color-background: #eff1f5;
    --color-foreground: #4c4f69;
    --color-card: #e6e9ef;
    --color-card-foreground: #4c4f69;
    --color-popover: #e6e9ef;
    --color-popover-foreground: #4c4f69;
    --color-primary: #1e66f5;
    --color-primary-foreground: #eff1f5;
    --color-secondary: #ccd0da;
    --color-secondary-foreground: #4c4f69;
    --color-muted: #ccd0da;
    --color-muted-foreground: #6c6f85;
    --color-accent: #dc8a78;
    --color-accent-foreground: #eff1f5;
    --color-destructive: #d20f39;
    --color-destructive-foreground: #eff1f5;
    --color-border: #bcc0cc;
    --color-input: #bcc0cc;
    --color-ring: #1e66f5;
    --radius: 0.5rem;
    --popover: 220 23% 95%;
    --popover-foreground: 234 16% 35%;
    /* Fallback colors for older browsers */
    --fallback-background: #ffffff;
    --fallback-popover: #f5f5f5;
  }

  .dark {
    /* Catppuccin Macchiato - we'll use the same colors for dark mode */
    --color-background: #24273a;
    --color-foreground: #cad3f5;
    --color-card: #1e2030;
    --color-card-foreground: #cad3f5;
    --color-popover: #1e2030;
    --color-popover-foreground: #cad3f5;
    --color-primary: #8aadf4;
    --color-primary-foreground: #24273a;
    --color-secondary: #363a4f;
    --color-secondary-foreground: #cad3f5;
    --color-muted: #363a4f;
    --color-muted-foreground: #a5adcb;
    --color-accent: #f4dbd6;
    --color-accent-foreground: #24273a;
    --color-destructive: #ed8796;
    --color-destructive-foreground: #24273a;
    --color-border: #363a4f;
    --color-input: #363a4f;
    --color-ring: #8aadf4;
    --popover: 240 21% 15%;
    --popover-foreground: 226 64% 88%;
    /* Fallback colors for older browsers */
    --fallback-background: #1e1e2e;
    --fallback-popover: #313244;
  }

  * {
    @apply box-border;
  }
  
  body {
    @apply bg-background text-foreground;
  }
}

@utility bg-background {
  background-color: var(--color-background);
}

@utility text-foreground {
  color: var(--color-foreground);
}

/* Add other utility classes for colors */
@utility bg-card {
  background-color: var(--color-card);
}

@utility text-card-foreground {
  color: var(--color-card-foreground);
}

@utility bg-primary {
  background-color: var(--color-primary);
}

@utility text-primary-foreground {
  color: var(--color-primary-foreground);
}

/* ... add other utility classes as needed ... */
  /* :root { */
  /*   /* gruvbox light theme */ */
  /*   --color-background: hsl(32 92% 87%); /* bg0 */ */
  /*   --color-foreground: hsl(40 13% 23%); /* fg */ */
  /**/
  /*   --color-card: hsl(39 59% 88%); /* bg1 */ */
  /*   --color-card-foreground: hsl(40 13% 23%); /* fg */ */
  /**/
  /*   --color-popover: hsl(39 59% 88%); /* bg1 */ */
  /*   --color-popover-foreground: hsl(40 13% 23%); /* fg */ */
  /**/
  /*   --color-primary: hsl(0 100% 31%); /* red */ */
  /*   --color-primary-foreground: hsl(40 92% 88%); /* bg */ */
  /**/
  /*   --color-secondary: hsl(39 46% 81%); /* bg2 */ */
  /*   --color-secondary-foreground: hsl(40 13% 23%); /* fg */ */
  /**/
  /*   --color-muted: hsl(37 29% 73%); /* bg3 */ */
  /*   --color-muted-foreground: hsl(40 4% 36%); /* gray */ */
  /**/
  /*   --color-accent: hsl(40 71% 49%); /* yellow */ */
  /*   --color-accent-foreground: hsl(0 0% 16%); */
  /**/
  /*   --color-destructive: hsl(0 76% 46%); /* bright_red */ */
  /*   --color-destructive-foreground: hsl(40 92% 88%); /* bg */ */
  /**/
  /*   --color-border: hsl(33 14% 59%); /* fg4 */ */
  /*   --color-input: hsl(33 14% 59%); /* fg4 */ */
  /*   --color-ring: hsl(0 100% 31%); /* red */ */
  /**/
  /*   --radius: 0.5rem; */
  /* } */
 
  /* .dark { */
  /*   /* gruvbox dark theme */ */
  /*   --color-background: hsl(0 0% 16%); /* bg0 */ */
  /*   --color-foreground: hsl(40 92% 88%); /* fg */ */
  /**/
  /*   --color-card: hsl(0 7% 23%); /* bg1 */ */
  /*   --color-card-foreground: hsl(40 92% 88%); /* fg */ */
  /**/
  /*   --color-popover: hsl(0 7% 23%); /* bg1 */ */
  /*   --color-popover-foreground: hsl(40 92% 88%); /* fg */ */
  /**/
  /*   --color-primary: hsl(6 93% 59%); /* red */ */
  /*   --color-primary-foreground: hsl(0 0% 16%); /* bg */ */
  /**/
  /*   --color-secondary: hsl(0 5% 29%); /* bg2 */ */
  /*   --color-secondary-foreground: hsl(40 92% 88%); /* fg */ */
  /**/
  /*   --color-muted: hsl(20 6% 36%); /* bg3 */ */
  /*   --color-muted-foreground: hsl(33 14% 59%); /* gray */ */
  /**/
  /*   --color-accent: hsl(42 95% 58%); /* yellow */ */
  /*   --color-accent-foreground: hsl(0 0% 16%); */
  /**/
  /*   --color-destructive: hsl(6 93% 59%); /* bright_red */ */
  /*   --color-destructive-foreground: hsl(40 92% 88%); /* bg */ */
  /**/
  /*   --color-border: hsl(24 10% 51%); /* fg4 */ */
  /*   --color-input: hsl(24 10% 51%); /* fg4 */ */
  /*   --color-ring: hsl(6 93% 59%); /* red */ */
  /* } */

@supports not (backdrop-filter: blur(1px)) {
  .select-content {
    background-color: var(--fallback-background) !important;
  }
}