/* ==========================================================================
   0. DESIGN TOKENS & TYPOGRAPHY ROOT (DM SANS - HYUNDAI EDITION)
   ========================================================================== */
:root {
  /* Font Family Stack */
  --font-primary: 
    "DM Sans", 
    -apple-system, 
    BlinkMacSystemFont, 
    "Segoe UI", 
    Roboto, 
    sans-serif;

  /* Font Feature Settings */
  --nx-font-features: "cv01" on, "cv02" on, "calt" on, "liga" on;

  /* Fluid Font Sizes */
  --nx-fs-display: clamp(2.75rem, 1.35rem + 7vw, 6.5rem);
  --nx-fs-h1: clamp(2.125rem, 1.25rem + 4.2vw, 4.25rem);
  --nx-fs-h2: clamp(1.625rem, 1.05rem + 2.8vw, 3rem);
  --nx-fs-h3: clamp(1.25rem, 0.95rem + 1.5vw, 2rem);
  --nx-fs-h4: clamp(1.125rem, 0.92rem + 0.8vw, 1.5rem);
  --nx-fs-h5: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  --nx-fs-body-lg: clamp(1.063rem, 0.95rem + 0.45vw, 1.25rem);
  --nx-fs-body: clamp(0.938rem, 0.88rem + 0.25vw, 1.063rem);
  --nx-fs-caption: 13px;
  --nx-fs-eyebrow: clamp(0.75rem, 0.72rem + 0.13vw, 0.813rem);
  --nx-fs-btn: 15px;

  /* Line Heights */
  --nx-lh-display: 1.02;
  --nx-lh-h1: 1.08;
  --nx-lh-h2: 1.15;
  --nx-lh-h3: 1.22;
  --nx-lh-h4: 1.3;
  --nx-lh-h5: 1.35;
  --nx-lh-body-lg: 1.6;
  --nx-lh-body: 1.6;
  --nx-lh-caption: 1.4;
  --nx-lh-tight: 1.2;

  /* Letter Spacing (DM Sans tampil maksimal dengan tight-kerning pada Heading) */
  --nx-ls-display: -0.035em;
  --nx-ls-h1: -0.03em;
  --nx-ls-h2: -0.025em;
  --nx-ls-h3: -0.015em;
  --nx-ls-h4: -0.01em;
  --nx-ls-h5: 0em;
  --nx-ls-body: -0.01em;
  --nx-ls-caption: 0.01em;
  --nx-ls-eyebrow: 0.12em;

  /* Font Weights */
  --nx-fw-regular: 400;
  --nx-fw-medium: 500;
  --nx-fw-semibold: 600;
  --nx-fw-bold: 700;

  /* Hyundai Brand Tokens */
  --nx-c-white: #ffffff;
  --nx-c-heading: #ffffff;
  --nx-c-body: rgba(255, 255, 255, 0.78);
  --nx-c-muted: rgba(255, 255, 255, 0.55);
  --nx-c-faint: rgba(255, 255, 255, 0.3);
  --nx-c-dark: #0a0e14;
  --nx-c-dark-body: #475569;
  --nx-c-accent: #0072d8;
  --nx-c-accent-hover: #005bb0;
  --nx-c-success: #10b981;
  --nx-c-warning: #f59e0b;
  --nx-c-danger: #ef4444;
}

/* ==========================================================================
   GLOBAL BASE INHERITANCE
   ========================================================================= */
html, body,
h1, h2, h3, h4, h5, h6,
p, span, a, input, button {
  font-family: var(--font-primary) !important;
  font-feature-settings: var(--nx-font-features) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* ==========================================================================
   TYPOGRAPHY SCALE
   ========================================================================== */
.nx-display, .nx-display * {
  font-family: var(--font-primary) !important;
  font-size: var(--nx-fs-display) !important;
  line-height: var(--nx-lh-display) !important;
  letter-spacing: var(--nx-ls-display) !important;
  font-weight: var(--nx-fw-bold) !important;
  margin-bottom: 0 !important;
}

.nx-h1, .nx-h1 * {
  font-family: var(--font-primary) !important;
  font-size: var(--nx-fs-h1) !important;
  line-height: var(--nx-lh-h1) !important;
  letter-spacing: var(--nx-ls-h1) !important;
  font-weight: var(--nx-fw-bold) !important;
}

.nx-h2, .nx-h2 * {
  font-family: var(--font-primary) !important;
  font-size: var(--nx-fs-h2) !important;
  line-height: var(--nx-lh-h2) !important;
  letter-spacing: var(--nx-ls-h2) !important;
  font-weight: var(--nx-fw-bold) !important;
}

.nx-h3, .nx-h3 * {
  font-family: var(--font-primary) !important;
  font-size: var(--nx-fs-h3) !important;
  line-height: var(--nx-lh-h3) !important;
  letter-spacing: var(--nx-ls-h3) !important;
  font-weight: var(--nx-fw-semibold) !important;
}

.nx-h4, .nx-h4 * {
  font-family: var(--font-primary) !important;
  font-size: var(--nx-fs-h4) !important;
  line-height: var(--nx-lh-h4) !important;
  letter-spacing: var(--nx-ls-h4) !important;
  font-weight: var(--nx-fw-semibold) !important;
}

.nx-h5, .nx-h5 * {
  font-family: var(--font-primary) !important;
  font-size: var(--nx-fs-h5) !important;
  line-height: var(--nx-lh-h5) !important;
  letter-spacing: var(--nx-ls-h5) !important;
  font-weight: var(--nx-fw-medium) !important;
}

.nx-body-lg, .nx-body-lg * {
  font-family: var(--font-primary) !important;
  font-size: var(--nx-fs-body-lg) !important;
  line-height: var(--nx-lh-body-lg) !important;
  letter-spacing: var(--nx-ls-body) !important;
  font-weight: var(--nx-fw-regular) !important;
}

.nx-body, .nx-body * {
  font-family: var(--font-primary) !important;
  font-size: var(--nx-fs-body) !important;
  line-height: var(--nx-lh-body) !important;
  letter-spacing: var(--nx-ls-body) !important;
  font-weight: var(--nx-fw-regular) !important;
}

.nx-caption, .nx-caption * {
  font-family: var(--font-primary) !important;
  font-size: var(--nx-fs-caption) !important;
  line-height: var(--nx-lh-caption) !important;
  letter-spacing: var(--nx-ls-caption) !important;
  font-weight: var(--nx-fw-regular) !important;
}

.nx-eyebrow, .nx-eyebrow * {
  font-family: var(--font-primary) !important;
  font-size: var(--nx-fs-eyebrow) !important;
  line-height: var(--nx-lh-tight) !important;
  letter-spacing: var(--nx-ls-eyebrow) !important;
  text-transform: uppercase !important;
  font-weight: var(--nx-fw-bold) !important;
}

    /* ==========================================================================
   4. COLOR UTILITIES (CLASS ASLI TETAP SAMA)
   ========================================================================== */
.nx-text-white, .nx-text-white * { color: var(--nx-c-white) !important; }
.nx-text-heading, .nx-text-heading * { color: var(--nx-c-heading) !important; }
.nx-text-body, .nx-text-body * { color: var(--nx-c-body) !important; }
.nx-text-muted, .nx-text-muted * { color: var(--nx-c-muted) !important; }
.nx-text-faint, .nx-text-faint * { color: var(--nx-c-faint) !important; }

.nx-text-dark, .nx-text-dark * { color: var(--nx-c-dark) !important; }
.nx-text-dark-body, .nx-text-dark-body * { color: var(--nx-c-dark-body) !important; }

.nx-text-accent, .nx-text-accent * { color: var(--nx-c-accent) !important; }
.nx-text-success, .nx-text-success * { color: var(--nx-c-success) !important; }
.nx-text-warning, .nx-text-warning * { color: var(--nx-c-warning) !important; }
.nx-text-danger, .nx-text-danger * { color: var(--nx-c-danger) !important; }

.nx-text-gradient, .nx-text-gradient * {
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.6) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block !important;
}