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

@layer base {
  :root {
    --brand-50: 214 100% 97%;
    --brand-100: 214 95% 93%;
    --brand-200: 213 97% 87%;
    --brand-300: 212 96% 78%;
    --brand-400: 213 94% 68%;
    --brand-500: 217 91% 60%;
    --brand-600: 221 83% 53%;
    --brand-700: 224 76% 48%;
    --brand-800: 226 71% 40%;
    --brand-900: 224 64% 33%;

    --base-50: 0 0% 98%;
    --base-100: 0 0% 96%;
    --base-200: 0 0% 90%;
    --base-300: 0 0% 84%;
    --base-400: 0 0% 64%;
    --base-500: 0 0% 45%;
    --base-600: 0 0% 32%;
    --base-700: 0 0% 25%;
    --base-800: 0 0% 15%;
    --base-900: 0 0% 9%;

    --base-white: 0 0% 100%;
    --base-black: 0 0% 0%;

    --red-50: 0 86% 97%;
    --red-400: 0 91% 71%;
    --red-500: 0 84% 60%;
    --red-600: 0 72% 51%;

    --background: var(--base-50);
    --foreground: var(--base-900);

    --primary: var(--brand-500);
    --primary-foreground: var(--base-50);

    --muted: var(--base-100);
    --muted-foreground: var(--base-500);

    --destructive: var(--red-500);
    --destructive-foreground: var(--base-white);

    --border: var(--base-200);
    --input: var(--base-200);
    --ring: var(--base-400);

    --radius: 0.5rem;
  }

  .dark {
    --background: var(--base-900);
    --foreground: var(--base-50);

    --primary: var(--brand-50);
    --primary-foreground: var(--brand-500);

    --muted: var(--base-800);
    --muted-foreground: var(--base-400);

    --destructive: var(--red-50);
    --destructive-foreground: var(--red-600);

    --border: var(--base-600);
    --input: var(--base-700);
    --ring: var(--brand-400);
  }
}

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