/* ============================================================
   Light Up Dental Studio — design tokens + custom utilities
   Paleta e helpers replicados do rascunho original (Readdy).
   Carregado a par do Tailwind (CDN em dev, build em produção).
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Inter:wght@300;400;500;600;700&family=Pacifico&display=swap");

:root {
  /* background (cremes quentes) */
  --background-50: 0.985 0.008 82;
  --background-100: 0.965 0.014 82;
  --background-200: 0.935 0.02 80;
  --background-300: 0.88 0.028 78;
  --background-400: 0.78 0.032 75;
  --background-500: 0.62 0.03 70;
  --background-600: 0.48 0.028 65;
  --background-700: 0.34 0.024 60;
  --background-800: 0.24 0.02 55;
  --background-900: 0.17 0.015 55;
  --background-950: 0.12 0.012 55;

  /* primary (terracota) */
  --primary-50: 0.965 0.02 55;
  --primary-100: 0.935 0.04 55;
  --primary-200: 0.87 0.075 55;
  --primary-300: 0.79 0.105 55;
  --primary-400: 0.71 0.12 52;
  --primary-500: 0.64 0.135 50;
  --primary-600: 0.56 0.135 48;
  --primary-700: 0.47 0.115 47;
  --primary-800: 0.38 0.09 47;
  --primary-900: 0.28 0.065 47;
  --primary-950: 0.2 0.045 47;

  /* accent (dourado / âmbar) */
  --accent-50: 0.975 0.02 82;
  --accent-100: 0.945 0.04 82;
  --accent-200: 0.9 0.07 80;
  --accent-300: 0.84 0.095 78;
  --accent-400: 0.78 0.11 75;
  --accent-500: 0.72 0.115 72;
  --accent-600: 0.62 0.11 68;
  --accent-700: 0.5 0.09 65;
  --accent-800: 0.4 0.07 63;
  --accent-900: 0.3 0.05 60;
  --accent-950: 0.22 0.035 58;

  /* secondary (neutro quente) */
  --secondary-50: 0.96 0.012 60;
  --secondary-100: 0.92 0.02 58;
  --secondary-200: 0.85 0.03 56;
  --secondary-300: 0.75 0.04 54;
  --secondary-400: 0.62 0.045 52;
  --secondary-500: 0.5 0.045 50;
  --secondary-600: 0.4 0.04 50;
  --secondary-700: 0.32 0.035 50;
  --secondary-800: 0.25 0.028 50;
  --secondary-900: 0.19 0.02 50;
  --secondary-950: 0.13 0.015 50;

  /* foreground (texto / superfícies escuras) */
  --foreground-50: 0.98 0.006 70;
  --foreground-100: 0.95 0.008 68;
  --foreground-200: 0.9 0.01 65;
  --foreground-300: 0.82 0.012 62;
  --foreground-400: 0.7 0.014 60;
  --foreground-500: 0.55 0.015 58;
  --foreground-600: 0.42 0.014 55;
  --foreground-700: 0.32 0.012 52;
  --foreground-800: 0.22 0.01 50;
  --foreground-900: 0.15 0.008 48;
  --foreground-950: 0.1 0.006 45;

  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-heading: "Cormorant Garamond", "Playfair Display", Georgia, serif;
}

html,
body {
  background-color: oklch(var(--background-50));
  color: oklch(var(--foreground-950));
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* dá jeito ter as duas famílias como classes utilitárias directas
   (o Tailwind CDN também as gera, isto é só um reforço/fallback) */
.font-heading {
  font-family: var(--font-heading);
}
.font-body {
  font-family: var(--font-body);
}
.font-signature {
  font-family: "Pacifico", "Segoe Script", "Brush Script MT", cursive;
}

/* overlay do hero da homepage */
.hero-overlay {
  background: linear-gradient(
    180deg,
    oklch(var(--foreground-950) / 0.25) 0%,
    oklch(var(--foreground-950) / 0.15) 40%,
    oklch(var(--foreground-950) / 0.35) 100%
  );
}

/* animação de entrada do conteúdo do hero */
.fade-up {
  animation: 0.9s ease-out both softFadeUp;
}

@keyframes softFadeUp {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* honeypot anti-spam do formulário de contacto */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .fade-up {
    animation: none;
  }
}