:root {
  /* ------------------------------------------------------------------------
     1. TYPOGRAPHY SYSTEM (Geist Direct)
     ------------------------------------------------------------------------ */
  --font-heading: 'Geist', system-ui, -apple-system, sans-serif;
  --font-body: 'Geist', system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;

  /* ------------------------------------------------------------------------
     2. SURFACES & CANVAS (BYD Official Inspiration)
     ------------------------------------------------------------------------ */
  --nx-bg-base: #f2f3f5;           /* Kanvas dasar sejuk (--el-bg-color-page) */
  --nx-bg-subtle: #e4e7ed;         /* Section pembagi / split background */
  --nx-bg-surface: #ffffff;        /* Pure White: Card & stage media 60:40 */
  --nx-bg-elevated: #ffffff;       /* Modal, popover, floating buttons */

  --nx-bg-base-rgb: 242, 243, 245;
  --nx-bg-surface-rgb: 255, 255, 255;

  /* ------------------------------------------------------------------------
     3. TYPOGRAPHY COLORS
     ------------------------------------------------------------------------ */
  --nx-c-heading: #1e2229;         /* Dashboard Charcoal: Tajam & tegas */
  --nx-c-lead: #303133;            /* Label subjudul & form */
  --nx-c-body: #606266;            /* Teks deskripsi fitur */
  --nx-c-muted: #909399;           /* Metadata, copyright, placeholder */

  /* ------------------------------------------------------------------------
     4. BRAND ACCENTS (Dual BYD Blue)
     ------------------------------------------------------------------------ */
  /* Primary Action: Swiper Vivid Blue (Kuat di latar terang) */
  --nx-c-accent: #007aff;
  --nx-c-accent-hover: #005ecb;
  --nx-c-accent-rgb: 0, 122, 255;
  --nx-c-accent-glow: rgba(0, 122, 255, 0.25);

  /* Secondary & Soft Elements: Element Tech Blue */
  --nx-c-accent-secondary: #409eff;
  --nx-c-accent-subtle: #ecf5ff;   /* Latar lembut untuk badge scramble */

  /* ------------------------------------------------------------------------
     5. BORDERS & MULTI-LAYER SHADOWS
     ------------------------------------------------------------------------ */
  --nx-c-border: #dcdfe6;          /* Garis batas card presisi */
  --nx-c-border-strong: #cdd0d6;

  /* Elevasi berlapis agar kartu mengapung tegas di atas kanvas #F2F3F5 */
  --nx-shadow-card: 0 8px 20px rgba(0, 0, 0, 0.06);
  --nx-shadow-elevated: 0 12px 32px 4px rgba(0, 0, 0, 0.04), 
                        0 8px 20px rgba(0, 0, 0, 0.08);

  /* ------------------------------------------------------------------------
     6. SPACING & RADIUS
     ------------------------------------------------------------------------ */
  --nx-space-xs: 4px;
  --nx-space-sm: 8px;
  --nx-space-md: 16px;
  --nx-space-lg: 24px;
  --nx-space-xl: 32px;
  --nx-space-2xl: 48px;
  --nx-space-3xl: 64px;

  --nx-radius-sm: 6px;
  --nx-radius-md: 12px;
  --nx-radius-lg: 16px;
  --nx-radius-full: 9999px;
}

:root {
  /* Variabel pelengkap pendukung file components.css di atas */
  --nx-radius-pill: 9999px;
  --nx-dur-fast: 250ms;
  --nx-fw-semibold: 600;
  --nx-fw-bold: 700;
  --nx-fs-eyebrow: 0.75rem;
  --nx-fs-body: 1rem;
}