/**
 * Jembatan token `--ui-*` (konfigurasi tema) ke variabel legacy `--eks-*`
 * yang masih dipakai stylesheet landing existing.
 *
 * Semua komponen baru wajib memakai `--ui-*` langsung.
 */

:root {
  --eks-gold: var(--ui-color-accent);
  --eks-gold-accent: var(--ui-color-accent-secondary);
  --eks-gold-hover: var(--ui-color-accent-hover);
  --eks-gold-soft: var(--ui-color-accent-soft);
  --eks-midnight: var(--ui-color-bg-elevated);
  --eks-navy: var(--ui-color-bg-panel);
  --eks-footer: var(--ui-color-bg-footer);
  --eks-panel: var(--ui-color-bg-panel);
  --eks-slate-950: var(--ui-color-bg-base);
  --eks-white-90: var(--ui-color-text-secondary);
  --eks-white-80: var(--ui-color-text-muted);
  --eks-white-70: var(--ui-color-text-subtle);
  --eks-container: var(--ui-container-max);
  --eks-radius-lg: var(--ui-radius-lg);
  --eks-radius-xl: var(--ui-radius-xl);
}

.eks-landing-body {
  font-family: var(--ui-font-family-base);
  font-size: var(--ui-font-size-base);
  font-weight: var(--ui-font-weight-normal);
  line-height: var(--ui-line-height-normal);
  color: var(--ui-color-text-primary);
  background:
    radial-gradient(1100px 520px at 8% -8%, var(--ui-color-bg-glow-a), transparent 58%),
    radial-gradient(900px 480px at 92% 4%, var(--ui-color-bg-glow-b), transparent 55%),
    var(--ui-color-bg-base);
}

.eks-landing {
  background: var(--ui-color-bg-base);
}

.eks-container {
  max-width: var(--ui-container-max);
}

.eks-nav.is-scrolled {
  background: var(--ui-color-bg-nav-scrolled);
  border-bottom-color: var(--ui-color-border);
}

.eks-hero__title {
  font-size: var(--ui-section-hero-title-size);
  line-height: var(--ui-line-height-tight);
}

.eks-hero__subtitle {
  font-size: var(--ui-section-hero-subtitle-size);
  color: var(--ui-color-text-secondary);
}

.eks-hero__slide-overlay {
  opacity: var(--ui-section-hero-overlay);
}

.eks-hero__visual {
  min-height: var(--ui-section-hero-min-height);
}

.eks-section__title {
  font-size: var(--ui-font-size-2xl);
}

.eks-section__subtitle {
  color: var(--ui-color-text-muted);
  font-size: var(--ui-font-size-base);
}

.eks-section__eyebrow {
  color: var(--ui-color-accent);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-semibold);
}

.eks-panel {
  background: var(--ui-color-bg-panel);
  border-color: var(--ui-color-border-subtle);
}

.eks-hero__feature {
  background: var(--ui-section-features-card-bg);
  border-color: var(--ui-color-border-subtle);
}

.eks-hero__feature h3 {
  font-size: var(--ui-section-features-title-size);
}

.eks-steps__item {
  background: var(--ui-section-framework-step-bg);
  border-color: var(--ui-color-border-subtle);
}

.eks-footer {
  background: #f9f7f2;
  color: #1a2332;
}