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

@layer base {
  :root {
    --background: 72 4% 98.75%;
    --foreground: 17 28% 2%;
    --muted: 35 21% 89%;
    --muted-foreground: 33 8% 49%;
    --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: 27 91% 51%;
    --primary-foreground: 0 0% 100%;
    --secondary: 23 93% 85%;
    --secondary-foreground: 39 16% 15%;
    --accent: 36 42% 90%;
    --accent-foreground: 203 66% 50%;
    --destructive: 15 90% 50%;
    --destructive-foreground: 210 40% 98%;
    --ring: 15 90% 50%;
    --radius: 0.5rem;

    --space: 1.5rem;

    --affirmative: 104 49% 50%;

    --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);

    /* Tedi extended tokens */
    --tedi-duration-fast: 120ms;
    --tedi-duration-normal: 200ms;
    --tedi-duration-slow: 350ms;
    --tedi-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --tedi-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --tedi-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --tedi-focus-ring-width: 2px;
    --tedi-focus-ring-offset: 2px;
    --tedi-focus-ring-color: hsl(var(--ring));
    --tedi-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tedi-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tedi-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  }

  .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 hover:underline;
  }
}

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