@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Source+Sans+3:wght@300;400;500;600;700&display=swap');

:root {
  --background: 210 20% 97%;
  --foreground: 213 50% 15%;
  --card: 0 0% 100%;
  --card-foreground: 213 50% 15%;
  --primary: 213 70% 14%;
  --primary-foreground: 42 50% 95%;
  --secondary: 42 50% 54%;
  --secondary-foreground: 213 70% 14%;
  --muted: 210 15% 93%;
  --muted-foreground: 213 20% 45%;
  --border: 213 20% 85%;
  --input: 213 20% 85%;
  --ring: 42 50% 54%;
  --navy: 213 70% 14%;
  --navy-light: 213 50% 25%;
  --gold: 42 50% 54%;
  --gold-light: 42 45% 75%;
  --gold-bg: 42 40% 96%;
  --warm-gray: 210 10% 96%;
  --trust-green: 145 40% 45%;
  --radius: 0.375rem;
}

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

body {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.7;
  color: hsl(213 50% 15%);
  background-color: hsl(210 20% 97%);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: hsl(213 70% 14%);
}

.font-heading { font-family: 'Playfair Display', Georgia, serif !important; }
.font-body    { font-family: 'Source Sans 3', system-ui, sans-serif !important; }

::selection { background: hsl(42 50% 54%); color: hsl(213 70% 14%); }

.container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 2rem; }
@media (max-width: 640px) { .container { padding: 0 1.25rem; } }

details > summary { user-select: none; cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] .details-icon { transform: rotate(45deg); }

input:focus, textarea:focus, select:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* =============================================================
   CUSTOM COLOR UTILITIES — !important para ganhar do Tailwind CDN
   O CDN injeta estilos depois do app.css no cascade.
   ============================================================= */

/* Backgrounds — class selectors para os sem barra */
.bg-primary    { background-color: hsl(213 70% 14%) !important; }
.bg-secondary  { background-color: hsl(42 50% 54%) !important; }
.bg-gold-bg    { background-color: hsl(42 40% 96%) !important; }
.bg-gold-light { background-color: hsl(42 45% 75%) !important; }
.bg-navy-light { background-color: hsl(213 50% 25%) !important; }
.bg-warm-gray  { background-color: hsl(210 10% 96%) !important; }
.bg-card       { background-color: hsl(0 0% 100%) !important; }
.bg-muted      { background-color: hsl(210 15% 93%) !important; }

/* Attribute selectors para classes com barra (evita problema de escaping no Safari) */
[class~="bg-primary/80"]  { background-color: hsl(213 70% 14% / 0.80) !important; }
[class~="bg-primary/10"]  { background-color: hsl(213 70% 14% / 0.10) !important; }
[class~="bg-secondary/15"]{ background-color: hsl(42 50% 54% / 0.15) !important; }

/* Text */
.text-primary              { color: hsl(213 70% 14%) !important; }
.text-primary-foreground   { color: hsl(42 50% 95%) !important; }
.text-secondary            { color: hsl(42 50% 54%) !important; }
.text-secondary-foreground { color: hsl(213 70% 14%) !important; }
.text-gold                 { color: hsl(42 50% 54%) !important; }
.text-gold-light           { color: hsl(42 45% 75%) !important; }
.text-muted-foreground     { color: hsl(213 20% 45%) !important; }
.text-foreground           { color: hsl(213 50% 15%) !important; }
.text-trust-green          { color: hsl(145 40% 45%) !important; }

[class~="text-primary-foreground/85"] { color: hsl(42 50% 95% / 0.85) !important; }
[class~="text-primary-foreground/80"] { color: hsl(42 50% 95% / 0.80) !important; }
[class~="text-primary-foreground/70"] { color: hsl(42 50% 95% / 0.70) !important; }

/* Borders */
.border-border         { border-color: hsl(213 20% 85%) !important; }
.border-input          { border-color: hsl(213 20% 85%) !important; }
.border-ring           { border-color: hsl(42 50% 54%) !important; }
.border-primary        { border-color: hsl(213 70% 14%) !important; }
.border-gold           { border-color: hsl(42 50% 54%) !important; }
.divide-border > * + * { border-color: hsl(213 20% 85%) !important; }

[class~="border-primary-foreground/30"] { border-color: hsl(42 50% 95% / 0.30) !important; }
[class~="border-primary-foreground/40"] { border-color: hsl(42 50% 95% / 0.40) !important; }

/* Hover */
.hover\:bg-gold-light:hover           { background-color: hsl(42 45% 75%) !important; }
.hover\:bg-navy-light:hover           { background-color: hsl(213 50% 25%) !important; }
.hover\:bg-primary:hover              { background-color: hsl(213 70% 14%) !important; }
.hover\:text-gold:hover               { color: hsl(42 50% 54%) !important; }
.hover\:text-gold-light:hover         { color: hsl(42 45% 75%) !important; }
.hover\:text-primary-foreground:hover { color: hsl(42 50% 95%) !important; }
.hover\:border-gold:hover             { border-color: hsl(42 50% 54%) !important; }