@config "../tailwind.config.ts";
@import "tailwindcss";

/* -----------------------------
   Brand variables (safe)
------------------------------ */

:root {
  --cream: #FFF9D5;
  --gold: #BD8018;
  --navy: #050A30;
  --brown: #7A5C4A;
  --brown-dark: #3D2719;
  --black: #000000;

  --transition-base: 300ms;
  --transition-slow: 500ms;

  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* -----------------------------
   Global resets (minimal)
------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--cream);
  color: var(--navy);
  font-family: var(--font-montserrat), system-ui, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}

/* -----------------------------
   Typography defaults (NO sizes)
------------------------------ */

h1,
h2,
h3,
h4,
h5,
h6 {
  /* font-weight: 600; */
  line-height: 1.25;
}

p {
  line-height: 1.7;
}

/* -----------------------------
   Custom utility classes
------------------------------ */
.hero-p-highlight{
  color: var(--gold);
}

/* -----------------------------
   Animations (used by components)
------------------------------ */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.animate-fadeIn {
  animation: fadeIn 1s var(--ease-smooth);
}

.animate-slideUp {
  animation: slideUp 0.8s var(--ease-smooth) forwards;
  opacity: 0;
}

.animate-scaleIn {
  animation: scaleIn 0.6s var(--ease-smooth) forwards;
  opacity: 0;
}