/* ==========================================================================
   MAX [MAXIMOS] — TYPOGRAPHY (FINAL)
   Keputusan user Fase 1: gaming & tegas, tanpa serif.
   Display: Orbitron (FINAL). Body: Inter.
   Orbitron = geometris lebar; scale dikalibrasi supaya heading tidak meluber.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --font-display: 'Orbitron', 'Arial Black', sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}

/* ------------------------------------------------------------------
   BASE
   ------------------------------------------------------------------ */
html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-primary);
  background-color: var(--bg-0);
}

/* ------------------------------------------------------------------
   TYPE SCALE — Orbitron lebar → ukuran sedikit di bawah scale umum.
   Pattern brand: heading multi-baris → baris aksen pakai .accent-line
   ------------------------------------------------------------------ */
.display-xl {
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 1.06;
  letter-spacing: 0.01em;
  font-weight: 700;
  color: var(--text-primary);
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 1.1;
  letter-spacing: 0.01em;
  font-weight: 700;
  color: var(--text-primary);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: 2.375rem;
  line-height: 1.12;
  letter-spacing: 0.01em;
  font-weight: 600;
  color: var(--text-primary);
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: 1.875rem;
  line-height: 1.18;
  font-weight: 600;
  color: var(--text-primary);
}

h4, .h4 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.25;
  font-weight: 600;
  color: var(--text-primary);
}

h5, .h5 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 600;
  color: var(--text-primary);
}

h6, .h6 {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  line-height: 1.35;
  letter-spacing: 0.02em;
  font-weight: 600;
  color: var(--text-primary);
}

/* Baris aksen pada heading multi-baris (mis. "Experience / The Lifestyle.")
   red-500 HANYA untuk display-xl/h1/h2 di bg-0/bg-1 (AA large 3.34:1).
   Di bg-2/bg-3 atau heading lebih kecil → pakai .accent-line--bright. */
.accent-line {
  color: var(--red-500);
}
.accent-line--bright { /* red-300 — AA di semua bg, aman sampai h4 */
  color: var(--red-300);
}

/* ------------------------------------------------------------------
   BODY & SUPPORT
   ------------------------------------------------------------------ */
.body-lg {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.body {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.body-sm {
  font-size: 0.875rem;
  line-height: 1.6;
  letter-spacing: 0.005em;
  color: var(--text-secondary);
}

.caption {
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--text-muted);
}

/* Label uppercase letter-spaced — DNA dari sample, dipertahankan.
   Pakai font display supaya nuansa gaming kebawa ke detail kecil. */
.label {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-muted);
}
.label--red {
  color: var(--red-300);
}

/* Nomor section: "01 · OVERVIEW" — pattern dari sample */
.section-marker {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--red-300);
}
.section-marker::before {
  content: '';
  width: var(--space-8);
  height: 1px;
  background: var(--red-500);
}