:root {
  /* Colors */
  --color-primary: #000000;
  --color-on-primary: #ffffff;
  --color-primary-container: #1c1b1b;
  --color-secondary: #815607;
  --color-secondary-container: #ffc471;
  --color-on-secondary: #ffffff;
  --color-on-secondary-container: #794f00;
  --color-background: #fbf9f9;
  --color-surface: #fbf9f9;
  --color-surface-container: #efeded;
  --color-surface-container-low: #f5f3f3;
  --color-surface-container-high: #e9e8e7;
  --color-on-surface: #1b1c1c;
  --color-on-surface-variant: #444748;
  --color-outline: #747878;
  --color-outline-variant: #c4c7c7;
  --color-error: #ba1a1a;

  /* Typography */
  --font-display: 'Epilogue', sans-serif;
  --font-body: 'Newsreader', serif;
  --font-label: 'Work Sans', sans-serif;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 12px;
  --space-md: 24px;
  --space-lg: 48px;
  --space-xl: 80px;
  --container-max: 1280px;
  --gutter: 24px;

  /* Radius */
  --radius-sm: 0.125rem;
  --radius-default: 0.25rem;
  --radius-lg: 0.5rem;
  --radius-full: 9999px;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Stepper animation */
.step-circle {
  transition: background-color 0.4s ease, border-color 0.4s ease;
}

.step-line {
  transition: background-color 0.4s ease;
}

/* Spinner */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* FAQ accordion */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.faq-answer.open {
  max-height: 400px;
}