style.css

/* Theme variables (light default). Replace the RGB values with your brand colors. */
:root {
  --primary-50: 239 246 255;
  --primary-100: 219 234 254;
  --primary-200: 191 219 254;
  --primary-300: 147 197 253;
  --primary-400: 96 165 250;
  --primary-500: 59 130 246;
  --primary-600: 37 99 235;
  --primary-700: 29 78 216;
  --primary-800: 30 64 175;
  --primary-900: 30 58 138;

  --secondary-50: 250 245 255;
  --secondary-100: 243 232 255;
  --secondary-200: 233 213 255;
  --secondary-300: 196 181 253;
  --secondary-400: 167 139 250;
  --secondary-500: 139 92 246;
  --secondary-600: 124 58 237;
  --secondary-700: 109 40 217;
  --secondary-800: 91 33 182;
  --secondary-900: 76 29 149;
}

/* Optional: Dark theme (if desired) */
/* [data-theme="dark"] {
  color-scheme: dark;
} */

/* Base */
html, body {
  height: 100%;
}

body {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.55;
}

/* Focus ring improvements */
:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px rgb(var(--primary-500) / 0.35);
}

/* Module details animation */
details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}

/* Module content collapsible */
.module .module-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 220ms ease;
}
.module .module-content.open {
  /* JS will set a max-height or use auto */
}

/* FAQ details animation (for browsers not supporting <details>) */
.faq-item[open] .faq-content {
  max-height: 500px;
}
.faq-item .faq-content {
  overflow: hidden;
  max-height: 0;
  transition: max-height 220ms ease;
}

/* Backdrop blur fallback */
@supports not (backdrop-filter: blur(12px)) {
  header {
    background-color: rgba(255, 255, 255, 0.96);
  }
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Utility shadow rings for cards */
.shadow-ring {
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.04), 0 2px 8px rgb(0 0 0 / 0.06);
}