:root {
  /* ------------------------------------------------------------------------
     1. TYPOGRAPHY FAMILIES
     ------------------------------------------------------------------------ */
  --font-heading: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', monospace;
  /* Line-height padat */
  --nx-lh-tight: 1.1;
  --nx-lh-snug: 1.2;
  --nx-lh-normal: 1.5;

  /* Ganti import di baris teratas token.css */


  /* ------------------------------------------------------------------------
     2. BRAND ACCENTS (MITSUBISHI CORE PALETTE)
     ------------------------------------------------------------------------ */
  /* Mitsubishi Dynamic Red */
  --nx-c-primary: #ED0000;
  --nx-c-primary-hover: #C50000;
  --nx-c-primary-rgb: 237, 0, 0;
  --nx-c-primary-glow: rgba(237, 0, 0, 0.25);

  --nx-c-accent: var(--nx-c-primary);
  --nx-c-accent-hover: var(--nx-c-primary-hover);
  --nx-c-accent-rgb: var(--nx-c-primary-rgb);
  --nx-c-accent-glow: var(--nx-c-primary-glow);

  /* Mitsubishi Obsidian Black & Dark Accents */
  --nx-c-secondary: #121212;
  --nx-c-secondary-rgb: 18, 18, 18;
  --nx-c-secondary-subtle: #262626;
  --nx-c-secondary-dark: #000000;

  /* WhatsApp Green for Quick Sales Conversion */
  --nx-c-wa: #25D366;
  --nx-c-wa-hover: #20BA5A;

  /* Accent Metallics & Status */
  --nx-c-accent-silver: #E5E7EB;
  --nx-c-accent-gold: #D97706;
  --nx-c-accent-subtle: #FFF5F5;

  /* ------------------------------------------------------------------------
     3. SURFACES & CANVAS
     ------------------------------------------------------------------------ */
  --nx-bg-base: #F8F9FA;
  --nx-bg-subtle: #F1F3F5;
  --nx-bg-surface: #FFFFFF;
  --nx-bg-elevated: #FFFFFF;
  --nx-bg-tint-red: #FFF5F5;        /* Pengganti tint-blue */
  --nx-bg-tint-dark: #1A1A1A;

  /* ------------------------------------------------------------------------
     4. TYPOGRAPHY COLORS
     ------------------------------------------------------------------------ */
  --nx-c-heading: #0a0a0a;   /* Hitam solid pekat */
  --nx-c-lead: #0a0a0a;      /* Teks lead ikut hitam pekat */
  --nx-c-body: #262626;      /* Teks paragraf hitam arang gelap */
  --nx-c-muted: #9FA3AE;     /* Abu-abu netral untuk teks pendukung */

  /* ------------------------------------------------------------------------
     5. BORDERS & SHADOWS
     ------------------------------------------------------------------------ */
  --nx-c-border: #E5E7EB;
  --nx-c-border-strong: #D1D5DB;
  --nx-c-border-subtle: #FEE2E2;
  --nx-shadow-card: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
  --nx-shadow-elevated: 0 20px 30px -10px rgba(237, 0, 0, 0.15);

  /* ------------------------------------------------------------------------
     6. RADII SYSTEM
     ------------------------------------------------------------------------ */
  --nx-radius-sm: 8px;
  --nx-radius-md: 16px;
  --nx-radius-lg: 24px;
  --nx-radius-pill: 9999px;

  --nx-header-height: 80px;
  --nx-header-bg: #000000;
  --nx-header-text: #ffffff;
  --nx-header-accent: var(--nx-c-primary, #ed0000);



  /* ------------------------------------------------------------------------
     7. SPACING SCALE & MEASURES
     ------------------------------------------------------------------------ */
  --nx-space-3xs: 0.25rem;  /* 4px */
  --nx-space-2xs: 0.5rem;   /* 8px */
  --nx-space-xs: 0.75rem;   /* 12px */
  --nx-space-sm: 1rem;      /* 16px */
  --nx-space-md: 1.5rem;    /* 24px */
  --nx-space-lg: 2rem;      /* 32px */
  --nx-space-xl: 3rem;      /* 48px */
  --nx-space-2xl: 4rem;     /* 64px */

   /* Pasang di section 7 pada token.css */
  --nx-measure-prose: 62ch;        /* Batas lebar ideal kenyamanan membaca */
  --nx-header-measure: var(--nx-measure-prose);

  /* ------------------------------------------------------------------------
     8. FLUID TYPE SCALE (UTOPIA SYSTEM)
     ------------------------------------------------------------------------ */
  --nx-fs--2: clamp(0.78rem, 0.76vw + 0.58rem, 0.88rem);
  --nx-fs--1: clamp(0.90rem, 0.85vw + 0.69rem, 1.00rem);
  --nx-fs-0:  clamp(1.00rem, 1.00vw + 0.75rem, 1.125rem);
  --nx-fs-1:  clamp(1.15rem, 1.35vw + 0.82rem, 1.375rem);
  --nx-fs-2:  clamp(1.35rem, 1.85vw + 0.90rem, 1.75rem);
  --nx-fs-3:  clamp(1.60rem, 2.50vw + 0.98rem, 2.25rem);
  --nx-fs-4:  clamp(1.90rem, 3.40vw + 1.05rem, 3.00rem);
  --nx-fs-5:  clamp(2.25rem, 4.60vw + 1.10rem, 4.00rem);

  --nx-lh-tight: 1.15;
  --nx-lh-snug: 1.25;
  --nx-lh-normal: 1.55;
  --nx-lh-relaxed: 1.7;

  --nx-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --nx-duration-entrance: 0.5s;
}


/* --------------------------------------------------------------------------
   TYPOGRAPHY MAPPINGS
   -------------------------------------------------------------------------- */
.nx-h1,
.nx-h2,
.nx-h3,
.nx-h4 {
  font-family: var(--font-heading);
  text-transform: none;
  word-spacing: -0.02em;
  color: var(--nx-c-heading); /* #0a0a0a */
  margin: 0;
}

.nx-h1 {
  font-size: var(--nx-fs-5);
  font-weight: 800;
  line-height: var(--nx-lh-tight);
  letter-spacing: -0.04em;
}

.nx-h2 {
  font-size: var(--nx-fs-4);
  font-weight: 700;
  line-height: var(--nx-lh-tight);
  letter-spacing: -0.035em;
}

.nx-h3 {
  font-size: var(--nx-fs-3);
  font-weight: 700;
  line-height: var(--nx-lh-snug);
  letter-spacing: -0.03em;
}

.nx-h4 {
  font-size: var(--nx-fs-2);
  font-weight: 600;
  line-height: var(--nx-lh-snug);
  letter-spacing: -0.02em;
}

.nx-eyebrow {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--nx-fs--1);
  font-weight: 700;
  line-height: var(--nx-lh-snug);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--nx-c-muted); /* #0a0a0a */
  margin: 0;
}

.nx-lead {
  font-family: var(--font-body);
  font-size: var(--nx-fs-1);
  line-height: var(--nx-lh-normal);
  letter-spacing: -0.015em;
  color: var(--nx-c-lead); /* #0a0a0a */
  margin: 0;
}

.nx-body {
  font-family: var(--font-body);
  font-size: var(--nx-fs-0);
  line-height: var(--nx-lh-normal);
  letter-spacing: -0.01em;
  color: var(--nx-c-body); /* #262626 */
  margin: 0;
}

.nx-body-sm {
  font-family: var(--font-body);
  font-size: var(--nx-fs--1);
  line-height: var(--nx-lh-normal);
  letter-spacing: -0.005em;
  color: var(--nx-c-muted);
  margin: 0;
}

.nx-legal {
  font-family: var(--font-body);
  font-size: var(--nx-fs--2);
  line-height: var(--nx-lh-snug);
  letter-spacing: 0;
  color: var(--nx-c-muted);
  margin: 0;
}

/* Penekanan Angka & Harga Simulasi */
.nx-display-price {
  font-family: var(--font-heading);
  font-size: var(--nx-fs-3);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--nx-c-primary);
}

/* ==========================================================================
   BACKGROUND UTILITIES
   ========================================================================== */

/* Background abu-abu sangat muda / kontras lembut untuk pemisah section */
.nx-bg-subtle {
  background-color: var(--nx-bg-subtle, #f8fafc);
}

/* Background putih bersih / kartu permukaan */
.nx-bg-surface {
  background-color: var(--nx-bg-surface, #ffffff);
}

/* Background gelap / hero kontras */
.nx-bg-dark {
  background-color: var(--nx-bg-dark, #0b0f19);
}
/* ==========================================================================
   TYPOGRAPHY SCALE UTILITIES (ALIGNED TO UTOPIA TOKENS)
   ========================================================================== */

/* Ukuran Teks (Size Scale) */
.nx-text-xs   { font-size: var(--nx-fs--2); } /* ~12px - 14px */
.nx-text-sm   { font-size: var(--nx-fs--1); } /* ~14px - 16px */
.nx-text-base { font-size: var(--nx-fs-0); }  /* ~16px - 18px */
.nx-text-md   { font-size: var(--nx-fs-1); }  /* ~18px - 22px */
.nx-text-lg   { font-size: var(--nx-fs-2); }  /* ~21px - 28px */
.nx-text-xl   { font-size: var(--nx-fs-3); }  /* ~25px - 36px */
.nx-text-2xl  { font-size: var(--nx-fs-4); }  /* ~30px - 48px */
.nx-text-3xl  { font-size: var(--nx-fs-5); }  /* ~36px - 64px */

/* Berat Teks (Weight) */
.nx-font-regular  { font-weight: 400; }
.nx-font-medium   { font-weight: 500; }
.nx-font-semibold { font-weight: 600; }
.nx-font-bold     { font-weight: 700; }
.nx-font-extrabold{ font-weight: 800; }

/* Transformasi & Perataan */
.nx-uppercase   { text-transform: uppercase; }
.nx-lowercase   { text-transform: lowercase; }
.nx-capitalize  { text-transform: capitalize; }
.nx-text-left   { text-align: left; }
.nx-text-center { text-align: center; }
.nx-text-right  { text-align: right; }

/* Warna Teks (Color Utilities) */
.nx-text-heading { color: var(--nx-c-heading, #0a0a0a); }
.nx-text-body    { color: var(--nx-c-body, #262626); }
.nx-text-muted   { color: var(--nx-c-muted, #6b7280); }
.nx-text-primary { color: var(--nx-c-primary, #ed0000); }
.nx-text-white   { color: #ffffff; }