@import "tailwindcss";

@layer base {
  :root {
    --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 {
    --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 */
  }

  * {
    @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 ... */