/* ==========================================================================
   DESIGN TOKENS (MITSUBISHI MOTORS SALES - NEXWEB DESIGN SYSTEM)
   File: token.css
   ========================================================================== */

: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: #6b7280;     /* 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;

  /* ------------------------------------------------------------------------
     7. CENTRALIZED SPACING & LAYOUT TOKENS
     ------------------------------------------------------------------------ */
  --nx-space-section-y: clamp(48px, 6vw, 80px);
  --nx-container-px: clamp(16px, 4vw, 32px);
  --nx-card-pad: clamp(20px, 3vw, 32px);
  --nx-space-xs: 8px;
  --nx-space-sm: 16px;
  --nx-space-md: 24px;
  --nx-space-lg: 32px;
  --nx-space-xl: 48px;

   /* 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);
}