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

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=JetBrains+Mono:wght@400;500;700&display=swap");

@layer base {
  :root {
    --background: rgb(251, 241, 199);
    --foreground: rgb(60, 56, 54);
    --card: rgb(235, 219, 178);
    --card-foreground: rgb(60, 56, 54);
    --popover: rgb(235, 219, 178);
    --popover-foreground: rgb(60, 56, 54);
    --primary: rgb(211, 134, 155);
    --primary-foreground: rgb(251, 241, 199);
    --secondary: rgb(184, 187, 38);
    --secondary-foreground: rgb(80, 73, 69);
    --muted: rgb(168, 153, 132);
    --muted-foreground: rgb(102, 92, 84);
    --accent: rgb(250, 189, 47);
    --accent-foreground: rgb(80, 73, 69);
    --destructive: rgb(204, 36, 29);
    --destructive-foreground: rgb(251, 241, 199);
    --border: rgb(213, 196, 161);
    --input: rgb(213, 196, 161);
    --ring: rgb(211, 134, 155);
    --radius: 0.5rem;
    --chart-1: rgb(250, 189, 47);
    --chart-2: rgb(131, 165, 152);
    --chart-3: rgb(69, 133, 136);
    --chart-4: rgb(254, 128, 25);
    --chart-5: rgb(251, 73, 52);
    --info: rgb(131, 165, 152);
    --info-foreground: rgb(40, 40, 40);
    --warning: rgb(215, 153, 33);
    --warning-foreground: rgb(40, 40, 40);
    --success: rgb(184, 187, 38);
    --success-foreground: rgb(40, 40, 40);
    --error: rgb(251, 73, 52);
    --error-foreground: rgb(40, 40, 40);
  }

  .dark {
    --background: rgb(40, 40, 40);
    --foreground: rgb(235, 219, 178);
    --card: rgb(60, 56, 54);
    --card-foreground: rgb(235, 219, 178);
    --popover: rgb(60, 56, 54);
    --popover-foreground: rgb(235, 219, 178);
    --primary: rgb(211, 134, 155);
    --primary-foreground: rgb(40, 40, 40);
    --secondary: rgb(80, 73, 69);
    --secondary-foreground: rgb(235, 219, 178);
    --muted: rgb(80, 73, 69);
    --muted-foreground: rgb(168, 153, 132);
    --accent: rgb(80, 73, 69);
    --accent-foreground: rgb(235, 219, 178);
    --destructive: rgb(204, 36, 29);
    --destructive-foreground: rgb(235, 219, 178);
    --border: rgb(102, 92, 84);
    --input: rgb(102, 92, 84);
    --ring: rgb(211, 134, 155);
    --chart-1: rgb(250, 189, 47);
    --chart-2: rgb(131, 165, 152);
    --chart-3: rgb(69, 133, 136);
    --chart-4: rgb(254, 128, 25);
    --chart-5: rgb(251, 73, 52);
    --info: rgb(131, 165, 152);
    --info-foreground: rgb(235, 219, 178);
    --warning: rgb(215, 153, 33);
    --warning-foreground: rgb(235, 219, 178);
    --success: rgb(184, 187, 38);
    --success-foreground: rgb(235, 219, 178);
    --error: rgb(251, 73, 52);
    --error-foreground: rgb(235, 219, 178);
  }
}

@layer base {
  body {
    font-family: var(--font-roboto), sans-serif;
  }
  textarea {
    font-family: var(--font-jetbrains-mono), monospace;
  }
}