/* ==========================================================================
   0. DESIGN TOKENS & TYPOGRAPHY ROOT (MONA SANS)
   ========================================================================== */
:root {
  /* Font Family Stack */
  --font-primary: 
    "Mona Sans", 
    ui-sans-serif, 
    system-ui, 
    -apple-system, 
    BlinkMacSystemFont, 
    "Segoe UI", 
    Roboto, 
    "Helvetica Neue", 
    Helvetica, 
    Arial, 
    sans-serif;

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

  /* Font Sizes */
  --nx-fs-display: clamp(40px, 6vw, 72px);
  --nx-fs-h1: clamp(32px, 4vw, 52px);
  --nx-fs-h2: clamp(24px, 3vw, 36px);
  --nx-fs-h3: clamp(20px, 2.5vw, 28px);
  --nx-fs-h4: clamp(18px, 2vw, 22px);
  --nx-fs-h5: clamp(16px, 1.5vw, 18px);
  --nx-fs-body-lg: clamp(17px, 1.7vw, 19px);
  --nx-fs-body: clamp(15px, 1.5vw, 17px);
  --nx-fs-caption: 12px;
  --nx-fs-eyebrow: 13px;
  --nx-fs-btn: 15px;

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

  /* Letter Spacing */
  --nx-ls-display: -0.04em;
  --nx-ls-h1: -0.03em;
  --nx-ls-h2: -0.02em;
  --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.08em;

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

  /* Color Palette Tokens */
  --nx-c-white: #ffffff;
  --nx-c-heading: #ffffff;
  --nx-c-body: rgba(255, 255, 255, 0.75);
  --nx-c-muted: rgba(255, 255, 255, 0.55);
  --nx-c-faint: rgba(255, 255, 255, 0.35);
  --nx-c-dark: #0f172a;
  --nx-c-dark-body: #475569;
  --nx-c-accent: #6366f1;
  --nx-c-accent-hover: #4f46e5;
  --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;
}

/* ==========================================================================
   1. TYPOGRAPHY SCALE (STRUKTUR SAJA - TANPA WARNA)
   ========================================================================== */

/* Display (Hero Raksasa) */
.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;
}

/* Heading 1 */
.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-semibold) !important;
}

/* Heading 2 */
.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-semibold) !important;
}

/* Heading 3 */
.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;
}

/* Heading 4 */
.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;
}

/* Heading 5 */
.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;
}

/* Body Large */
.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;
}

/* Body Standard */
.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;
}

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

/* Eyebrow / Tagline */
.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-semibold) !important;
}

/* ==========================================================================
   2. COLOR UTILITIES (CLASS WARNA TERPISAH)
   ========================================================================== */

/* Light Theme / Dark Background Utilities */
.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; }

/* Dark Theme / Light Background Utilities */
.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; }

/* Accent & Semantic Utilities */
.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; }

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