@import "tailwindcss";

@plugin "tailwindcss-animate";

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: #11147e;
  /* Empire Blue */
  --color-secondary: var(--secondary);
  --color-accent: #D05402;
  /* Terracotta Flame */
  --color-terrene-olive: #8A8D63;
  --color-harvest-gold: #CFAA68;
  --color-noir-slate: #1C1C1C;
  --color-porcelain-white: #FFFCF0;
  --color-limestone: #F3F1E6;
  --color-gray-900: lab(8.11897% .811279 -12.254);

  --font-sans: var(--font-inter);

  --animate-fade-in: fadeIn 1s ease-out forwards;
  --animate-slide-up: slideUp 0.8s ease-out forwards;

  @keyframes fadeIn {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  @keyframes slideUp {
    0% {
      opacity: 0;
      transform: translateY(20px);
    }

    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

:root {
  --background: #FFFCF0;
  /* Porcelain White */
  --foreground: #1C1C1C;
  /* Noir Slate */
  --secondary: #F3F1E6;
  /* Limestone */
}

.dark {
  --background: #0a0a0a;
  --foreground: #FFFCF0;
  /* Porcelain White */
  --secondary: #1C1C1C;
  /* Noir Slate */
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-inter), sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}