:root {
  --brand: #7A4F2A;
  --bg: #F5F1EA;
  --fg: #3A2E20;
  --marzipan: #E5C9A8;
  --cream: #FFF8E7;
  --caramel: #C4832A;
  --display-font: 'DM Serif Display', 'Playfair Display', serif;
  --body-font: 'Inter', system-ui, sans-serif;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--body-font);
  background: var(--bg);
  color: var(--fg);
}

.font-display {
  font-family: var(--display-font);
  letter-spacing: -0.02em;
}

#hero-canvas { pointer-events: none; }

::selection {
  background: var(--marzipan);
  color: var(--fg);
}

.bg-bg { background-color: var(--bg); }
.text-fg { color: var(--fg); }
.text-fg\/40 { color: color-mix(in srgb, var(--fg) 40%, transparent); }
.text-fg\/50 { color: color-mix(in srgb, var(--fg) 50%, transparent); }
.text-fg\/70 { color: color-mix(in srgb, var(--fg) 70%, transparent); }
.text-fg\/75 { color: color-mix(in srgb, var(--fg) 75%, transparent); }

/* Light theme overrides */
body[data-theme="light"] [class*="border-white/"] { border-color: rgba(122, 79, 42, 0.12) !important; }
body[data-theme="light"] [class*="bg-white/"] { background-color: rgba(229, 201, 168, 0.18) !important; }

body[data-theme="light"] .backdrop-blur-md {
  background: rgba(245, 241, 234, 0.85) !important;
}

/* Section alternating backgrounds */
body[data-theme="light"] #sobre,
body[data-theme="light"] #como-pedir {
  background: rgba(255, 248, 231, 0.6);
}

body[data-theme="light"] #historia,
body[data-theme="light"] #depoimentos {
  background: rgba(229, 201, 168, 0.22);
}

/* Warm card style for bakery */
body[data-theme="light"] .service-card {
  background: rgba(255, 248, 231, 0.7) !important;
  border-color: rgba(122, 79, 42, 0.15) !important;
}

body[data-theme="light"] .service-card:hover {
  background: rgba(229, 201, 168, 0.45) !important;
  border-color: var(--brand) !important;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

[data-bind] {
  animation: fade-up 0.8s ease-out backwards;
}

.service-card { animation: fade-up 0.8s ease-out backwards; }
.service-card:nth-child(1) { animation-delay: 0.1s; }
.service-card:nth-child(2) { animation-delay: 0.2s; }
.service-card:nth-child(3) { animation-delay: 0.3s; }
.service-card:nth-child(4) { animation-delay: 0.4s; }
.service-card:nth-child(5) { animation-delay: 0.5s; }
.service-card:nth-child(6) { animation-delay: 0.6s; }

/* Step circles for "Como Pedir" */
.step-circle {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--brand);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display-font);
  font-size: 1.25rem;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(122, 79, 42, 0.25);
}

/* Testimonial cards */
.testimonial-card {
  background: rgba(255, 248, 231, 0.8);
  border: 1px solid rgba(122, 79, 42, 0.12);
  border-radius: 1.25rem;
  padding: 2rem;
  transition: all 0.3s ease;
  animation: fade-up 0.8s ease-out backwards;
}

.testimonial-card:hover {
  border-color: var(--brand);
  box-shadow: 0 8px 32px rgba(122, 79, 42, 0.12);
  transform: translateY(-2px);
}

.testimonial-card:nth-child(1) { animation-delay: 0.1s; }
.testimonial-card:nth-child(2) { animation-delay: 0.2s; }
.testimonial-card:nth-child(3) { animation-delay: 0.3s; }

/* Quote mark */
.quote-mark {
  font-family: var(--display-font);
  font-size: 5rem;
  line-height: 1;
  color: var(--marzipan);
  display: block;
  margin-bottom: -1.5rem;
}

/* Stat badges */
.stat-badge {
  background: rgba(229, 201, 168, 0.4);
  border: 1px solid rgba(122, 79, 42, 0.2);
  border-radius: 9999px;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Step connector line */
.step-connector {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--marzipan), transparent);
  margin: 0 1rem;
  margin-top: -2rem;
}

/* Warm section divider */
.section-divider {
  width: 3rem;
  height: 3px;
  background: var(--brand);
  border-radius: 2px;
  margin: 1.5rem 0;
  opacity: 0.5;
}

/* Hero badge warm style */
body[data-theme="light"] [data-bind="hero-eyebrow"] {
  border-color: rgba(122, 79, 42, 0.25) !important;
  background: rgba(229, 201, 168, 0.3) !important;
  color: var(--brand) !important;
}

/* Header border warm */
body[data-theme="light"] header {
  border-color: rgba(122, 79, 42, 0.1) !important;
}

/* Footer border warm */
body[data-theme="light"] footer {
  border-color: rgba(122, 79, 42, 0.1) !important;
  background: rgba(229, 201, 168, 0.2) !important;
}

/* WhatsApp button pulse on contact section */
@keyframes subtle-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(122, 79, 42, 0.3); }
  50% { box-shadow: 0 0 0 8px rgba(122, 79, 42, 0); }
}

.whatsapp-cta-btn {
  animation: subtle-pulse 2.5s ease infinite;
}

/* Floating hero content — override white text for light theme */
body[data-theme="light"] #hero h1 span {
  background-image: linear-gradient(135deg, var(--fg) 0%, var(--fg) 50%, var(--brand) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent;
}

body[data-theme="light"] #hero p[data-bind="tagline"] {
  color: color-mix(in srgb, var(--fg) 70%, transparent);
}

body[data-theme="light"] #hero .text-fg\/40 {
  color: color-mix(in srgb, var(--fg) 40%, transparent);
}