/* Modern Agencies — theme + custom styles */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Space Grotesk", sans-serif;
}

/* Themes */
body, body.theme-blue { --brand-blue-50:#f0f4f9; --brand-blue-100:#e2e8f5; --brand-blue-500:#3b5aa3; --brand-blue-600:#243b6b; --brand-blue-700:#192a4e; --brand-accent-100:#ffedd5; --brand-accent-500:#c2410c; --brand-accent-600:#9a3412; }
body.theme-green { --brand-blue-50:#f0fdf4; --brand-blue-100:#dcfce7; --brand-blue-500:#22c55e; --brand-blue-600:#15803d; --brand-blue-700:#14532d; --brand-accent-100:#fffbeb; --brand-accent-500:#d97706; --brand-accent-600:#b45309; }
body.theme-red { --brand-blue-50:#fef2f2; --brand-blue-100:#fee2e2; --brand-blue-500:#ef4444; --brand-blue-600:#b91c1c; --brand-blue-700:#7f1d1d; --brand-accent-100:#fef3c7; --brand-accent-500:#d97706; --brand-accent-600:#b45309; }
body.theme-purple { --brand-blue-50:#faf5ff; --brand-blue-100:#f3e8ff; --brand-blue-500:#a855f7; --brand-blue-600:#7c3aed; --brand-blue-700:#5b21b6; --brand-accent-100:#fff1f2; --brand-accent-500:#f43f5e; --brand-accent-600:#e11d48; }
body.theme-orange { --brand-blue-50:#fff7ed; --brand-blue-100:#ffedd5; --brand-blue-500:#f97316; --brand-blue-600:#ea580c; --brand-blue-700:#9a3412; --brand-accent-100:#eff6ff; --brand-accent-500:#2563eb; --brand-accent-600:#1d4ed8; }
body.theme-teal { --brand-blue-50:#f0fdfa; --brand-blue-100:#ccfbf1; --brand-blue-500:#14b8a6; --brand-blue-600:#0d9488; --brand-blue-700:#115e59; --brand-accent-100:#fef3c7; --brand-accent-500:#ca8a04; --brand-accent-600:#a16207; }
body.theme-navy { --brand-blue-50:#eff6ff; --brand-blue-100:#dbeafe; --brand-blue-500:#3b82f6; --brand-blue-600:#1e40af; --brand-blue-700:#1e3a8a; --brand-accent-100:#fff7ed; --brand-accent-500:#f97316; --brand-accent-600:#ea580c; }
body.theme-brown { --brand-blue-50:#fdf8f6; --brand-blue-100:#f5e6e0; --brand-blue-500:#b45309; --brand-blue-600:#78350f; --brand-blue-700:#451a03; --brand-accent-100:#f0fdf4; --brand-accent-500:#16a34a; --brand-accent-600:#15803d; }
body.theme-black { --brand-blue-50:#f8fafc; --brand-blue-100:#f1f5f9; --brand-blue-500:#64748b; --brand-blue-600:#1e293b; --brand-blue-700:#0f172a; --brand-accent-100:#ecfdf5; --brand-accent-500:#10b981; --brand-accent-600:#059669; }
body.theme-gold { --brand-blue-50:#fefdf0; --brand-blue-100:#fef9c3; --brand-blue-500:#eab308; --brand-blue-600:#ca8a04; --brand-blue-700:#854d0e; --brand-accent-100:#f4f4f5; --brand-accent-500:#71717a; --brand-accent-600:#52525b; }

/* Base */
body { font-family: var(--font-sans); background-color:#fafbfc; color:#0f172a; -webkit-font-smoothing:antialiased; transition: background-color .3s ease, color .3s ease; }
body * { transition-property: background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: 150ms; }
.font-display { font-family: var(--font-display); }
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

/* Brand utility helpers using CSS vars (works alongside Tailwind CDN) */
.bg-brand-blue-50   { background-color: var(--brand-blue-50) !important; }
.bg-brand-blue-100  { background-color: var(--brand-blue-100) !important; }
.bg-brand-blue-500  { background-color: var(--brand-blue-500) !important; }
.bg-brand-blue-600  { background-color: var(--brand-blue-600) !important; }
.bg-brand-blue-700  { background-color: var(--brand-blue-700) !important; }
.hover\:bg-brand-blue-50:hover  { background-color: var(--brand-blue-50) !important; }
.hover\:bg-brand-blue-700:hover { background-color: var(--brand-blue-700) !important; }
.text-brand-blue-500 { color: var(--brand-blue-500) !important; }
.text-brand-blue-600 { color: var(--brand-blue-600) !important; }
.text-brand-blue-700 { color: var(--brand-blue-700) !important; }
.hover\:text-brand-blue-600:hover { color: var(--brand-blue-600) !important; }
.border-brand-blue-100 { border-color: var(--brand-blue-100) !important; }
.border-brand-blue-500 { border-color: var(--brand-blue-500) !important; }
.border-l-brand-blue-600 { border-left-color: var(--brand-blue-600) !important; }
.ring-brand-blue-500 { --tw-ring-color: var(--brand-blue-500) !important; }
.focus\:border-brand-blue-500:focus { border-color: var(--brand-blue-500) !important; }

.bg-brand-accent-100 { background-color: var(--brand-accent-100) !important; }
.bg-brand-accent-500 { background-color: var(--brand-accent-500) !important; }
.bg-brand-accent-600 { background-color: var(--brand-accent-600) !important; }
.hover\:bg-brand-accent-600:hover { background-color: var(--brand-accent-600) !important; }
.text-brand-accent-100 { color: var(--brand-accent-100) !important; }
.text-brand-accent-500 { color: var(--brand-accent-500) !important; }
.text-brand-accent-600 { color: var(--brand-accent-600) !important; }
.hover\:text-brand-accent-600:hover { color: var(--brand-accent-600) !important; }
.border-brand-accent-500 { border-color: var(--brand-accent-500) !important; }
.border-l-brand-accent-500 { border-left-color: var(--brand-accent-500) !important; }

/* Gradients that used brand vars */
.hero-overlay { background-image: linear-gradient(to right, color-mix(in oklab, var(--brand-blue-700) 95%, transparent), color-mix(in oklab, var(--brand-blue-700) 80%, transparent), transparent); }
.cta-gradient { background-image: linear-gradient(to right, var(--brand-blue-700), var(--brand-blue-600), var(--brand-accent-600)); }

/* Animations */
@keyframes fadeIn { from { opacity:0; transform: translateY(8px);} to { opacity:1; transform: translateY(0);} }
.animate-fade-in { animation: fadeIn .4s cubic-bezier(.16,1,.3,1) forwards; }

/* Social media icons (brand-colored circles) */
.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  color: #ffffff;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.social-icon:hover { transform: translateY(-2px); filter: brightness(1.1); }
.social-icon svg { width: 1.25rem; height: 1.25rem; }
.social-instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.social-facebook { background-color: #1877F2; }
.social-whatsapp { background-color: #25D366; }