:root {
  /* Core surfaces (light) */
  --background: 175 35% 97%;
  --foreground: 222 26% 14%;

  --card: 0 0% 100%;
  --card-foreground: 222 26% 14%;

  --popover: 0 0% 100%;
  --popover-foreground: 222 26% 14%;

  /* Brand (dark orange) */
  --primary: 24 95% 53%;
  --primary-foreground: 0 0% 100%;
  --primary-hover: 24 95% 60%;

  /* Gentle secondary tint */
  --secondary: 174 35% 93%;
  --secondary-foreground: 222 26% 14%;

  /* Coral accent (warm) */
  --accent: 16 88% 58%;
  --accent-foreground: 0 0% 100%;

  --muted: 180 18% 94%;
  --muted-foreground: 215 15% 40%;

  --border: 178 18% 86%;
  --ring: 174 76% 28%;

  --success: 150 52% 35%;
  --success-foreground: 0 0% 100%;

  --warning: 34 92% 45%;
  --warning-foreground: 0 0% 100%;

  /* WhatsApp brand green */
  --whatsapp: 142 70% 49%;
  --whatsapp-foreground: 0 0% 100%;
  --whatsapp-hover: 142 70% 55%;

  /* Call button blue */
  --call: 212 100% 47%;
  --call-foreground: 0 0% 100%;
  --call-hover: 212 100% 53%;

  --radius-xl: 20px;
  --radius-lg: 16px;
  --radius-md: 12px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-soft: 0 10px 30px -18px hsl(222 26% 14% / 0.18);
  --shadow-elevated: 0 18px 48px -28px hsl(222 26% 14% / 0.24);
  --shadow-glow: 0 0 0 6px hsl(var(--primary) / 0.12);
}

::selection { background: hsl(var(--primary) / 0.18); }

html { scroll-behavior: smooth; }

body {
  font-family: 'Rubik', ui-sans-serif, system-ui;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  overflow-x: hidden;
}

/* Subtle grain overlay (very low contrast) */
.grain {
  position: relative;
}
.grain:before {
  content: '';
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.focus-ring:focus-visible {
  outline: none;
  box-shadow: var(--shadow-glow);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .motion-safe\:animate-fadeUp { animation: none !important; }
  .motion-safe\:animate-floaty { animation: none !important; }
}

/* ============================================
   BUTTON STYLES WITH HOVER ANIMATIONS
   ============================================ */

/* Web Button - Orange (Primary) */
.btn-web {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  transition: all 0.3s ease;
}

.btn-web:hover {
  background-color: hsl(var(--primary-hover));
  transform: translateY(-2px);
  box-shadow: var(--shadow-elevated);
}

/* WhatsApp Button - Green */
.btn-whatsapp {
  background-color: hsl(var(--whatsapp));
  color: hsl(var(--whatsapp-foreground));
  transition: all 0.3s ease;
}

.btn-whatsapp:hover {
  background-color: hsl(var(--whatsapp-hover));
  transform: translateY(-2px);
  box-shadow: var(--shadow-elevated);
}

/* Call Button - Blue */
.btn-call {
  background-color: hsl(var(--call));
  color: hsl(var(--call-foreground));
  transition: all 0.3s ease;
}

.btn-call:hover {
  background-color: hsl(var(--call-hover));
  transform: translateY(-2px);
  box-shadow: var(--shadow-elevated);
}

/* Secondary button styles */
.btn-web.secondary {
  background-color: transparent;
  border: 2px solid hsl(var(--primary));
  color: hsl(var(--primary));
}

.btn-web.secondary:hover {
  background-color: hsl(var(--primary) / 0.1);
  transform: translateY(-2px);
}

.btn-whatsapp.secondary {
  background-color: transparent;
  border: 2px solid hsl(var(--whatsapp));
  color: hsl(var(--whatsapp));
}

.btn-whatsapp.secondary:hover {
  background-color: hsl(var(--whatsapp) / 0.1);
  transform: translateY(-2px);
}

.btn-call.secondary {
  background-color: transparent;
  border: 2px solid hsl(var(--call));
  color: hsl(var(--call));
}

.btn-call.secondary:hover {
  background-color: hsl(var(--call) / 0.1);
  transform: translateY(-2px);
}

/* Mobile action bar buttons */
.btn-web.mobile {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
}

.btn-whatsapp.mobile {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
}

.btn-call.mobile {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
}