@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=Space+Mono:wght@400&display=swap');

/* LIGHT MODE */
:root {
  --background: 36 35% 93%;
  --foreground: 242 20% 17%;
  --border: 36 20% 80%;
  --card: 38 42% 97%;
  --card-foreground: 242 20% 17%;
  --card-border: 36 24% 84%;
  --sidebar: 242 20% 17%;
  --sidebar-foreground: 36 35% 93%;
  --sidebar-border: 242 15% 28%;
  --sidebar-primary: 164 31% 33%;
  --sidebar-primary-foreground: 38 42% 97%;
  --sidebar-accent: 30 45% 63%;
  --sidebar-accent-foreground: 242 20% 17%;
  --sidebar-ring: 30 45% 63%;
  --popover: 38 42% 97%;
  --popover-foreground: 242 20% 17%;
  --popover-border: 36 24% 84%;
  --primary: 242 20% 17%;
  --primary-foreground: 38 42% 97%;
  --secondary: 164 31% 33%;
  --secondary-foreground: 38 42% 97%;
  --muted: 35 22% 85%;
  --muted-foreground: 239 12% 43%;
  --accent: 30 45% 63%;
  --accent-foreground: 242 20% 17%;
  --destructive: 3 55% 42%;
  --destructive-foreground: 38 42% 97%;
  --input: 36 20% 80%;
  --ring: 164 31% 33%;
  
  --app-font-sans: 'DM Sans', sans-serif;
  --app-font-serif: 'Instrument Serif', Georgia, serif;
  --app-font-mono: 'Space Mono', monospace;
}

html { scroll-behavior: smooth; }
::selection { background: hsl(var(--accent)); color: hsl(var(--foreground)); }
[id] { scroll-margin-top: 7.5rem; }
:focus-visible { outline: 2px solid #b87858; outline-offset: 3px; }

body {
  font-family: var(--app-font-sans);
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.mizmar-site {
  --ink: #292731;
  --paper: #f2eee7;
  --paper-deep: #e8e0d4;
  --teal: #386b63;
  --clay: #b87858;
  --sun: #d3a16e;
  background: var(--paper);
  color: var(--ink);
}

.font-display { font-family: var(--app-font-serif); }
.font-mono { font-family: var(--app-font-mono); }
.eyebrow { font-family: var(--app-font-mono); font-size: 0.68rem; letter-spacing: .18em; text-transform: uppercase; }
.mizmar-site svg { display: block; flex: 0 0 auto; }

/* Lucide React sets explicit SVG dimensions. The PHP renderer matches that
   behavior so card/action icons never inherit browser-default SVG sizing. */
.treatment-icon-container {
  display: flex;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.treatment-icon-container > svg {
  width: 17px !important;
  height: 17px !important;
}

.section-pad { padding: 5rem 1.25rem; }
.container-mizmar { width: min(1180px, calc(100% - 2.5rem)); margin-inline: auto; }

.reveal { opacity: 0; transform: translateY(18px); animation: reveal-in .85s cubic-bezier(.2,.8,.2,1) forwards; }
.reveal-d1 { animation-delay: .1s; }
.reveal-d2 { animation-delay: .2s; }
.reveal-d3 { animation-delay: .3s; }
@keyframes reveal-in { to { opacity: 1; transform: translateY(0); } }

.scroll-reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.scroll-reveal.is-visible { opacity: 1; transform: translateY(0); }

@keyframes float-y { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }
@keyframes pulse-soft { 0%,100% { opacity: .35 } 50% { opacity: .8 } }

.hero-orb { animation: float-y 7s ease-in-out infinite; }
.mineral-pulse { animation: pulse-soft 5s ease-in-out infinite; }

.line-link { position: relative; }
.line-link::after { content:""; position:absolute; left:0; right:100%; bottom:-4px; height:1px; background:currentColor; transition:right .35s ease; }
.line-link:hover::after { right:0; }

.ritual-card { transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease; }
.ritual-card:hover { transform: translateY(-8px); box-shadow: 0 18px 45px rgba(41,39,49,.15); }

.grain::after { content:""; position:fixed; inset:0; pointer-events:none; opacity:.05; z-index:50; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E"); }

@media (min-width: 768px) {
  .section-pad { padding: 8.5rem 2rem; }
  .container-mizmar { width: min(1180px, calc(100% - 5rem)); }
}
@media (min-width: 640px) and (max-width: 767px) {
  .section-pad { padding: 6.5rem 1.5rem; }
  .container-mizmar { width: min(1180px, calc(100% - 3rem)); }
}
@media (max-width: 639px) {
  .mizmar-site { overflow-x: clip; }
  .booking-section { padding-top: 3.5rem; }
  .hero-orb { height: 13rem; width: 13rem; right: -2rem; top: 16%; }
  .ritual-card:hover { transform: none; box-shadow: none; }
}

@media (max-width: 1023px) {
  .mizmar-site [data-testid^="link-hero-"],
  .mizmar-site [data-testid^="link-experience-"],
  .mizmar-site [data-testid^="link-commercial-"],
  .mizmar-site [data-testid^="link-location-"],
  .mizmar-site [data-testid^="link-final-"],
  .mizmar-site [data-testid^="link-treatment-"],
  .mizmar-site [data-testid^="button-treatment-book"],
  .mizmar-site [data-testid="button-experience-options"],
  .mizmar-site [data-testid="button-commercial-availability"] {
    min-height: 2.75rem;
  }
  .mizmar-site [data-testid^="button-gallery-filter-"] {
    min-height: 2.5rem;
  }
  .mizmar-site [data-testid^="link-announcement-"] {
    display: inline-flex;
    min-height: 2.5rem;
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { animation: none; opacity:1; transform:none; }
  .scroll-reveal { opacity:1; transform:none; transition:none; }
  .hero-orb, .mineral-pulse { animation:none; }
}

/* Base tailwind elements */
.lucide { width: 1em; height: 1em; }