/* =============================================================
   Orion DS — Section Contrast System
   5 modes for visual rhythm across page sections
   ============================================================= */

/* --- Section Base --- */
.section {
  position: relative;
  overflow: hidden;
}

/* --- Section Modes via data attribute --- */
[data-section-mode="dark"] {
  background-color: var(--surface-default);
  color: var(--text-primary);
}

[data-section-mode="raised"] {
  background-color: var(--surface-raised);
  color: var(--text-primary);
}

[data-section-mode="subtle"] {
  background-color: var(--surface-subtle);
  color: var(--text-primary);
}

[data-section-mode="accent"] {
  background-color: var(--color-lime-500);
  color: var(--color-dark-900);
}

[data-section-mode="glass"] {
  background: rgba(30, 29, 48, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text-primary);
}

/* --- Accent mode: invert child components --- */
[data-section-mode="accent"] .btn--primary {
  background-color: var(--color-dark-900);
  color: var(--color-lime-500);
}

[data-section-mode="accent"] .btn--primary:hover {
  background-color: var(--color-dark-800);
}

[data-section-mode="accent"] .btn--outline {
  border-color: var(--color-dark-900);
  color: var(--color-dark-900);
}

[data-section-mode="accent"] .btn--outline:hover {
  background-color: var(--color-dark-900);
  color: var(--color-lime-500);
}

[data-section-mode="accent"] .section-header__title {
  color: var(--color-dark-900);
}

[data-section-mode="accent"] .section-header__subtitle {
  color: var(--color-dark-900);
  opacity: 0.7;
}

[data-section-mode="accent"] p,
[data-section-mode="accent"] .hero__subtitle {
  color: var(--color-dark-900);
  opacity: 0.7;
}

[data-section-mode="accent"] .section-header__badge {
  background-color: var(--color-dark-900);
  color: var(--color-lime-500);
}

[data-section-mode="accent"] .badge--accent {
  background-color: var(--color-dark-900);
  color: var(--color-lime-500);
}

[data-section-mode="accent"] a {
  color: var(--color-dark-900);
}

[data-section-mode="accent"] .text-accent,
[data-section-mode="accent"] .accent {
  color: var(--color-dark-900);
  font-weight: var(--font-weight-black);
}

/* --- Glass mode: strengthen borders --- */
[data-section-mode="glass"] .card {
  background: rgba(30, 29, 48, 0.4);
  border-color: rgba(255, 255, 255, 0.08);
}

/* --- Section Spacing Variants --- */
.section--compact {
  padding-block: var(--spacing-8);
}

@media (min-width: 768px) {
  .section--compact {
    padding-block: var(--spacing-12);
  }
}

@media (min-width: 1024px) {
  .section--compact {
    padding-block: var(--spacing-16);
  }
}

.section--spacious {
  padding-block: var(--spacing-16);
}

@media (min-width: 768px) {
  .section--spacious {
    padding-block: var(--spacing-20);
  }
}

@media (min-width: 1024px) {
  .section--spacious {
    padding-block: var(--spacing-24);
  }
}

/* --- Backward compat: .section--alt maps to subtle --- */
.section--alt {
  background-color: var(--surface-subtle);
}
