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

@layer base {
  :root {
    --background: 0, 0%, 97.6%;
    --foreground: 330 8% 5%;

    --card: 0 8% 97%;
    --card-foreground: 330 8% 5%;

    --popover: 0 8% 97%;
    --popover-foreground: 330 8% 5%;

    --primary: 330 84% 68%;
    --primary-foreground: 0 0% 2%;

    --secondary: 330 6% 93%;
    --secondary-foreground: 330 8% 5%;

    --muted: 330 6% 73%;
    --muted-foreground: 330 6% 45%;

    --navigation: 0, 0%, 100%;
    --navigation-foreground: 0 0% 98%;

    --navigation-mobile: 219.47, 20.88%, 35.69%;

    --sidebar: 0, 0%, 100%;
    --sidebar-foreground: 0 0% 98%;

    --sub-header: 219.47, 20.88%, 35.69%;
    --sub-header-foreground: 0, 0%, 98%;

    --accent: 330 6% 93%;
    --accent-foreground: 330 8% 5%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;

    --border: 340 6% 90%;
    --input: 330 7% 82%;
    --ring: 330 24% 74%;

    --radius: 0.5rem;
  }

  .dark {
    /* darkest */
    --background: 219, 20%, 19.61%;
    --foreground: 0 0% 98%;

    --card: 0 0% 3%;
    --card-foreground: 0 0% 98%;

    --popover: 0 0% 3%;
    --popover-foreground: 0 0% 98%;

    --primary: 330 84% 68%;
    --primary-foreground: 0 0% 2%;

    --secondary: 0 0% 6%;
    --secondary-foreground: 0 0% 98%;

    --muted: 0 0% 35%;
    --muted-foreground: 0 0% 49%;

    /* dark */
    --navigation: 219.47, 20.88%, 35.69%;
    --navigation-foreground: 0 0% 98%;

    --navigation-mobile: 219.47, 20.88%, 35.69%;

    /* darker */
    --sidebar: 221.38, 20.57%, 27.65%;
    --sidebar-foreground: 0 0% 98%;

    --sub-header: 221.38, 20.57%, 27.65%;
    --sub-header-foreground: 0, 0%, 100%;

    --accent: 0 0% 6%;
    --accent-foreground: 0 0% 98%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;

    --border: 0 0% 11%;
    --input: 0 0% 16%;
    --ring: 330 84% 40%;
  }
}

@layer base {
  * {
    @apply border-border;
    min-width: 0;
  }
  body {
    @apply bg-background text-foreground;
  }
}
