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

/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. 
All colors MUST be HSL.
*/

@layer base {
  :root {
    --background: 42 40% 96%;
    --foreground: 30 20% 20%;

    --card: 0 0% 100%;
    --card-foreground: 30 20% 20%;

    --popover: 0 0% 100%;
    --popover-foreground: 30 20% 20%;

    --primary: 42 78% 55%;
    --primary-foreground: 0 0% 100%;

    --secondary: 42 35% 88%;
    --secondary-foreground: 30 20% 25%;

    --muted: 42 30% 92%;
    --muted-foreground: 30 15% 45%;

    --accent: 42 78% 55%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 100%;

    --border: 42 25% 85%;
    --input: 42 25% 90%;
    --ring: 42 78% 55%;

    --radius: 1rem;

    /* Custom luxury tokens */
    --luxury-gold: 42 78% 55%;
    --luxury-cream: 42 40% 96%;
    --luxury-dark: 30 20% 20%;
    --luxury-light: 0 0% 98%;

    /* Gradients */
    --gradient-luxury: linear-gradient(
      135deg,
      hsl(45 35% 95%) 0%,
      hsl(42 40% 88%) 100%
    );
    --gradient-gold: linear-gradient(
      135deg,
      hsl(42 78% 55%) 0%,
      hsl(38 75% 48%) 100%
    );

    /* Shadows */
    --shadow-luxury: 0 10px 40px -10px hsl(42 78% 55% / 0.25);
    --shadow-soft: 0 4px 20px -4px hsl(30 20% 20% / 0.08);

    --sidebar-background: 0 0% 98%;

    --sidebar-foreground: 240 5.3% 26.1%;

    --sidebar-primary: 240 5.9% 10%;

    --sidebar-primary-foreground: 0 0% 98%;

    --sidebar-accent: 240 4.8% 95.9%;

    --sidebar-accent-foreground: 240 5.9% 10%;

    --sidebar-border: 220 13% 91%;

    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  .dark {
    --background: 30 25% 12%;
    --foreground: 42 40% 96%;

    --card: 30 22% 15%;
    --card-foreground: 42 40% 96%;

    --popover: 30 22% 15%;
    --popover-foreground: 42 40% 96%;

    --primary: 42 78% 55%;
    --primary-foreground: 0 0% 100%;

    --secondary: 30 20% 20%;
    --secondary-foreground: 42 40% 96%;

    --muted: 30 20% 20%;
    --muted-foreground: 42 30% 65%;

    --accent: 42 78% 55%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 62.8% 50%;
    --destructive-foreground: 0 0% 100%;

    --border: 30 20% 25%;
    --input: 30 20% 25%;
    --ring: 42 78% 55%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
    font-family: "Poppins", sans-serif;
  }
  /* 
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: "Playfair Display", serif;
  } */
}

@layer utilities {
  .luxury-gradient {
    background: var(--gradient-luxury);
  }

  .gold-gradient {
    background: var(--gradient-gold);
  }

  .luxury-shadow {
    box-shadow: var(--shadow-luxury);
  }

  .soft-shadow {
    box-shadow: var(--shadow-soft);
  }

  .glass-effect {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
  }
}

#root {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em #61dafbaa);
}

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}

.card {
  padding: 2em;
}

.read-the-docs {
  color: #888;
}

:root {
  --luxury-gold: 42, 78%, 55%;
  --luxury-gold-dark: 38, 75%, 48%;
  --background: 0, 0%, 100%;
  --foreground: 30, 20%, 20%;
  --muted-foreground: 30, 15%, 45%;
  --border: 42, 25%, 85%;
  --primary: 42, 78%, 55%;
  --ring: 42, 78%, 55%;
}
.luxury-gradient {
  background: linear-gradient(
    to bottom right,
    hsl(45, 35%, 95%),
    hsl(42, 40%, 88%)
  );
}
.gold-gradient {
  background: linear-gradient(
    to bottom right,
    hsl(var(--luxury-gold)),
    hsl(var(--luxury-gold-dark))
  );
}
.glass-effect {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.luxury-shadow {
  box-shadow: 0 10px 40px -10px hsla(42, 78%, 55%, 0.25);
}
.animate-float {
  animation: float 6s infinite ease-in-out;
}
@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}
.animate-fade-in {
  animation: fadeIn 0.8s ease-in-out;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}