@import "tailwindcss";

:root {
  /* Backgrounds & Foregrounds */
  --background: #f9f9f9;
  --foreground: #1a1c1c;
  
  /* Retain for custom CSS */
  --midnight-blue: #020B1A;
  --sand-beige: #D4C3A3;
  --gold: #C5A059;
  --soft-grey: #F8F9FA;
  --white: #FFFFFF;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-midnight: #020B1A;
  --color-sand: #D4C3A3;
  --color-gold: #C5A059;
  --color-soft-grey: #F8F9FA;

  /* Stitch Design System */
  --color-primary: #000613;
  --color-primary-container: #001f3f;
  --color-secondary: #775a19;
  --color-on-secondary-container: #785a1a;
  --color-surface: #f9f9f9;
  --color-on-surface: #1a1c1c;
  --color-on-surface-variant: #43474e;
  --color-outline-variant: #c4c6cf;
  --color-outline: #74777f;

  /* Map old font families from code.html to our current font variables */
  --font-headline: var(--font-oswald), serif;
  --font-body: var(--font-inter), sans-serif;
  --font-label: var(--font-inter), sans-serif;
}


/* Tailwind's preflight handles box-sizing and resets.
   We only add box-sizing for safety, NOT margin/padding reset. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  max-width: 100vw;
  overflow-x: hidden;
  background-color: var(--background);
  color: var(--foreground);
}

body {
  font-family: var(--font-inter), sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Fluid Typography — only for semantic headings, not Tailwind classes */
h1 {
  font-family: var(--font-oswald), sans-serif;
  font-weight: 200;
  line-height: 1.1;
}

h2 {
  font-family: var(--font-oswald), sans-serif;
  font-weight: 300;
  line-height: 1.2;
}

h3, h4, h5, h6 {
  font-family: var(--font-oswald), sans-serif;
  font-weight: 500;
}


.luxury-text {
  letter-spacing: 0.1em;
  text-transform: uppercase;
}


/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes zoom {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.15);
  }
}

.fade-in-up {
  animation: fadeInUp 0.8s ease-out forwards;
}

/* Transitions */
.smooth-transition {
  transition: all 0.3s ease;
}


/* Buttons */
.btn-hollow {
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--midnight-blue);
  background: transparent;
  color: var(--midnight-blue);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-hollow:hover {
  background: var(--midnight-blue);
  color: var(--white);
}

.btn-gold {
  padding: 1rem 2rem;
  background: var(--gold);
  color: var(--white);
  border: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-gold:hover {
  background: #b49140;
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(197, 160, 89, 0.3);
}