/* ── Design Tokens ─────────────────────────────────────── */
:root {
  --coffee-deep: #3d2314;
  --coffee:      #6b3a2a;
  --cream:       #fdf8f3;
  --gold:        #d4a853;
  --accent:      #f0e6d6;
  --ash:         #f5f2ee;
  --shadow-soft:    0 2px 12px -2px rgba(61,35,20,.08), 0 1px 3px -1px rgba(61,35,20,.04);
  --shadow-elegant: 0 8px 30px -6px rgba(61,35,20,.18), 0 2px 8px -2px rgba(61,35,20,.08);
}
body { font-family: 'Inter', system-ui, sans-serif; background-color: var(--cream); color: var(--coffee-deep); -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ── Lovable Custom Classes ────────────────────────────── */
.font-display       { font-family: 'Poppins', sans-serif; }
.gradient-coffee    { background: linear-gradient(135deg, var(--coffee-deep) 0%, var(--coffee) 100%); }
.surface-cream      { background-color: var(--cream); }
.container-prose    { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 1.25rem; padding-right: 1.25rem; }
@media (min-width: 640px)  { .container-prose { padding-left: 2rem; padding-right: 2rem; } }
@media (min-width: 1024px) { .container-prose { padding-left: 3rem; padding-right: 3rem; } }
.shadow-soft        { box-shadow: var(--shadow-soft); }
.shadow-elegant     { box-shadow: var(--shadow-elegant); }

/* Tailwind semantic overrides that need CSS vars */
.bg-background  { background-color: var(--cream) !important; }
.bg-background\/85 { background-color: rgba(253,248,243,.85) !important; }
.bg-card        { background-color: #fff !important; }
.bg-muted       { background-color: #f4ede4 !important; }
.text-foreground { color: var(--coffee-deep) !important; }
.text-foreground\/75 { color: rgba(61,35,20,.75) !important; }
.text-foreground\/80 { color: rgba(61,35,20,.80) !important; }
.text-foreground\/85 { color: rgba(61,35,20,.85) !important; }
.text-muted-foreground { color: #7c5c4b !important; }
.text-primary   { color: var(--coffee) !important; }
.text-primary-foreground { color: #fff !important; }
.border-border  { border-color: rgba(90,62,43,.15) !important; }
.border-border\/60 { border-color: rgba(90,62,43,.1) !important; }
.bg-\[var\(--coffee-deep\)\] { background-color: var(--coffee-deep) !important; }
.bg-\[var\(--cream\)\]       { background-color: var(--cream) !important; }
.bg-\[var\(--ash\)\]         { background-color: var(--ash) !important; }
.bg-\[var\(--accent\)\]      { background-color: var(--accent) !important; }
.text-\[var\(--cream\)\]     { color: var(--cream) !important; }
.text-\[var\(--gold\)\]      { color: var(--gold) !important; }
.text-\[var\(--coffee-deep\)\] { color: var(--coffee-deep) !important; }
.from-\[var\(--coffee\)\]\/15 { --tw-gradient-from: rgba(107,58,42,.15) !important; }

/* Backdrop blur */
.backdrop-blur-xl  { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }

/* Hover shadow elegant */
.hover\:shadow-elegant:hover { box-shadow: var(--shadow-elegant); }
.hover\:-translate-y-0\.5:hover { transform: translateY(-2px); }

/* Aspect ratio */
.aspect-\[16\/10\] { aspect-ratio: 16/10; }

/* Animate ping */
@keyframes ping { 75%,100% { transform: scale(2); opacity: 0; } }
.animate-ping { animation: ping 1.5s cubic-bezier(0,0,.2,1) infinite; }

/* Group hover */
.group:hover .group-hover\:scale-105 { transform: scale(1.05); }
.group:hover .group-hover\:text-primary { color: var(--coffee) !important; }
.group:hover .group-hover\:translate-x-0\.5 { transform: translateX(2px); }
.group:hover .group-hover\:border-primary { border-color: var(--coffee) !important; }

/* Duration */
.duration-500 { transition-duration: 500ms; }

/* Fill current for stars */
.fill-current { fill: currentColor; }

/* WhatsApp button shadow */
.shadow-\[0_10px_30px_-8px_rgba\(37\,211\,102\,0\.6\)\] {
  box-shadow: 0 10px 30px -8px rgba(37,211,102,.6);
}

/* Tracking custom */
.tracking-\[0\.18em\] { letter-spacing: .18em; }
.tracking-\[0\.2em\]  { letter-spacing: .2em; }
.tracking-\[0\.2em\]  { letter-spacing: .2em; }

/* Text sizes not in CDN at this config */
.text-\[12px\]  { font-size: 12px; }
.text-\[10px\]  { font-size: 10px; }
.text-\[11px\]  { font-size: 11px; }

/* Leading */
.leading-\[1\.05\] { line-height: 1.05; }

/* Rounded 3xl */
.rounded-3xl { border-radius: 1.5rem; }

/* Bg opacity variants */
.bg-white\/10 { background-color: rgba(255,255,255,.10) !important; }
.bg-white\/15 { background-color: rgba(255,255,255,.15) !important; }
.bg-white\/20 { background-color: rgba(255,255,255,.20) !important; }
.focus\:bg-white\/20:focus { background-color: rgba(255,255,255,.20) !important; }

/* Transition for mobile menu */
[x-cloak] { display: none !important; }