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

@layer base {
  :root {
    --background: 33 12% 97%;
    --foreground: 39 16% 15%;
    --muted: 35 21% 89%;
    --muted-foreground: 41 4% 57%;
    --popover: 33 12% 97%;
    --popover-foreground: 28 37% 18%;
    --border: 35 21% 89%;
    --input: 35 19% 84%;
    --card: 23 32% 98%;
    --card-foreground: 24 66% 27%;
    --primary: 33 92% 52%;
    --primary-foreground: 0 0% 100%;
    --secondary: 23 93% 85%;
    --secondary-foreground: 39 16% 15%;
    --accent: 36 42% 90%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 15 90% 50%;
    --destructive-foreground: 210 40% 98%;
    --ring: 15 90% 50%;
    --radius: 0.5rem;

    --chart-1: oklch(0.646 0.222 41.116);
    --chart-2: oklch(0.6 0.118 184.704);
    --chart-3: oklch(0.398 0.07 227.392);
    --chart-4: oklch(0.828 0.189 84.429);
    --chart-5: oklch(0.769 0.188 70.08);
  }

  .dark {
    --background: 224 71% 4%;
    --foreground: 213 31% 91%;
    --muted: 223 47% 11%;
    --muted-foreground: 215.4 16.3% 56.9%;
    --accent: 216 34% 17%;
    --accent-foreground: 210 40% 98%;
    --popover: 224 71% 4%;
    --popover-foreground: 215 20.2% 65.1%;
    --border: 216 34% 17%;
    --input: 216 34% 17%;
    --card: 224 71% 4%;
    --card-foreground: 213 31% 91%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 1.2%;
    --secondary: 222.2 47.4% 11.2%;
    --secondary-foreground: 210 40% 98%;
    --destructive: 0 63% 31%;
    --destructive-foreground: 210 40% 98%;
    --ring: 216 34% 17%;

    --chart-1: oklch(0.488 0.243 264.376);
    --chart-2: oklch(0.696 0.17 162.48);
    --chart-3: oklch(0.769 0.188 70.08);
    --chart-4: oklch(0.627 0.265 303.9);
    --chart-5: oklch(0.645 0.246 16.439);
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply font-sans antialiased bg-background text-foreground;
  }
}

@layer components {
  .form-input {
    @apply block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full;
  }

  .form-select {
    @apply block shadow rounded-md border border-gray-400 px-3 py-2 mt-2 w-full h-10;
  }

  .form-submit {
    @apply rounded-lg py-3 px-5 bg-primary text-white inline-block font-medium cursor-pointer;
  }

  .error-box {
    @apply bg-red-50 text-red-500 px-3 py-2 font-medium rounded-lg mt-3;
  }

  .notice-success {
    @apply py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block;
  }

  .primary-button {
    @apply rounded-lg py-2 px-3 bg-primary text-white block font-medium;
  }

  .secondary-button {
    @apply rounded-lg py-2 px-3 bg-secondary block font-medium;
  }

  .link {
    @apply text-primary underline;
  }
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}