:root {
  --background: #ffffff;
  --foreground: #080808;
  --accent: #f1482e;
  --accent-hover: #d83a22;
  --muted: #f3f3f1;
  --dark: #111111;
  --theme-primary: #F1482E;
  --theme-primary-hover: #D83A22;
  --theme-accent: #F1482E;
  --theme-dark: #080808;
  --theme-light: #F8F8F7;
  --theme-background: #FFFFFF;
  --theme-surface: #FFFFFF;
  --theme-text: #080808;
  --theme-muted-text: #6B7280;
  --theme-border: #E5E7EB;
  --theme-font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --theme-font-heading: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
  --theme-card-radius: 18px;
  --theme-button-radius: 999px;
  font-family: var(--theme-font-body);
}

body {
  background: var(--theme-background);
  color: var(--theme-text);
  font-family: var(--theme-font-body);
}

h1,h2,h3,h4,h5,h6,.display-title {
  font-family: var(--theme-font-heading) !important;
}

/* Theme-controlled structural radius. Pills remain pills; cards/modals follow the selected preset. */
.rounded-2xl { border-radius: var(--theme-card-radius) !important; }
.rounded-3xl { border-radius: calc(var(--theme-card-radius) * 1.35) !important; }

html {
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Fluid typography and key utility classes */
.display-title {
  font-family: var(--theme-font-heading);
  letter-spacing: -0.04em;
  line-height: 0.9;
}

/* Custom subtle scrollbar */
::-webkit-scrollbar {
  width: 7px;
}
::-webkit-scrollbar-track {
  background: #f8f8f8;
}
::-webkit-scrollbar-thumb {
  background: #d4d4d4;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #a3a3a3;
}

/* CMS-controlled hero typography */
.hero-title-top {
  font-size: var(--hero-top-mobile, 15.6vw);
}
.hero-title-bottom {
  font-size: var(--hero-bottom-mobile, 18.2vw);
}
@media (min-width: 768px) {
  .hero-title-top { font-size: var(--hero-top-desktop, 13.4vw); }
  .hero-title-bottom { font-size: var(--hero-bottom-desktop, 15.2vw); }
}

/* Decorative hero artwork uploaded from CMS. Kept on a child so parallax transform remains independent. */
@keyframes heroDecorativePulse {
  0%, 100% { transform: scale(0.94); }
  50% { transform: scale(1.06); }
}
.hero-decorative-pulse {
  animation: heroDecorativePulse 5.5s ease-in-out infinite;
  transform-origin: center;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .hero-decorative-pulse { animation: none; }
}