/* Stratum Media — design tokens & base styles
   Colours are HSL triplets so Tailwind can apply opacity (e.g. bg-primary/90). */
:root {
  --background: 36 28% 97%;
  --foreground: 0 0% 4%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 4%;
  --primary: 180 84% 7%;
  --primary-foreground: 0 0% 100%;
  --secondary: 210 50% 45%;
  --secondary-foreground: 0 0% 100%;
  --muted: 38 18% 93%;
  --muted-foreground: 60 6% 34%;
  --accent: 0 60% 50%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 84% 60%;
  --success: 160 84% 39%;
  --border: 37 12% 86%;
  --input: 37 12% 86%;
  --ring: 180 84% 7%;
  --surface-warm: 36 28% 97%;
  --surface-stone: 38 18% 93%;

  --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: "Cormorant Garamond", Georgia, serif;
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 400;
}

/* Anchor targets sit below the fixed 72px header */
[id] { scroll-margin-top: 96px; }

/* Header: transparent over the hero, solid once scrolled or when the mobile menu is open */
#site-header.is-solid {
  background: hsl(var(--primary)) !important;
  border-bottom: 1px solid hsl(var(--primary-foreground) / 0.08) !important;
}

/* FAQ accordion */
.faq-panel { max-height: 0; overflow: hidden; transition: max-height 400ms ease; }
.faq-item.is-open .faq-icon { transform: rotate(45deg); }

/* Subtle fade-up on scroll (only when JS is running) */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 900ms ease, transform 900ms ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* Form status messages */
.form-status { display: none; }
.form-status.is-visible { display: block; }