:root {
  /* Colorful/Fresh Palette inspired by wellness and nature */
  --vital-energy-bg: #F4FAF6;
  --vital-energy-surface: #FFFFFF;
  --vital-energy-accent: #10B981;
  --vital-energy-accent-hover: #059669;
  --vital-energy-text: #1F2937;
  --vital-energy-shade: #064E3B;
  --vital-energy-orange: #F39C12;
  --vital-energy-gradient: linear-gradient(135deg, #059669, #10B981, #34D399);
  
  /* Fonts as defined in settings */
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Poppins', sans-serif;
}

/* Header Burger Toggle for CSS-only Responsive Navigation */
#burger-toggle:checked ~ .stellar-portal-links {
  display: flex !important;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: white;
  padding: 1.5rem 1rem;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
  border-top: 1px solid rgba(16,185,129,0.1);
}

/* Base custom definitions */
html {
  scroll-behavior: smooth;
}

/* Scroll-driven page progress animation (CSS only) */
@keyframes progress-grow { 
  to { width: 100%; } 
}
.scroll-progress-line { 
  height: 4px; 
  width: 0; 
  animation: progress-grow linear; 
  animation-timeline: scroll(); 
}

/* Bento Grid styling */
.bento-harmony-matrix {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.bento-span-4 {
  grid-column: span 4;
}

.bento-span-2 {
  grid-column: span 2;
}

.bento-span-3 {
  grid-column: span 3;
}

/* Responsive Bento adjustments */
@media (max-width: 1024px) {
  .bento-harmony-matrix {
    grid-template-columns: repeat(1, 1fr);
  }
  .bento-span-4, .bento-span-2, .bento-span-3 {
    grid-column: span 1 !important;
  }
}

/* Soft border radius and Raised shadows rules */
.health-bento-cell, .soulful-experience-card, .vitality-brand-logo img {
  border-radius: 16px;
}

.health-bento-cell:hover {
  transform: scale(1.02);
  box-shadow: 0 15px 35px rgba(16, 185, 129, 0.08);
}

/* Scroll-driven reveal animation (CSS only) */
@keyframes slide-up { 
  from { 
    opacity: 0; 
    transform: translateY(40px); 
  } 
  to { 
    opacity: 1; 
    transform: none; 
  } 
}

/* Only apply keyframes if browser supports view-driven timelines */
@supports (animation-timeline: view()) {
  .reveal { 
    animation: slide-up 0.8s linear both; 
    animation-timeline: view(); 
    animation-range: entry 10% entry 40%; 
  }
}

/* Fallback for responsive menus */
@media (max-width: 767px) {
  .stellar-portal-links {
    display: none;
  }
}

/* Ensuring uppercase headers where selected */
h1, h2, h3 {
  text-transform: uppercase;
}