/* ==========================================================================
   NEXWEB DESIGN SYSTEM - GLOBAL TOKENS (MASTER 2026)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Syne:wght@600;700;800&display=swap');

/* TIER 1: GLOBAL BASE & DEFAULT FALLBACK */
:root {
  /* Font Family */
  --font-heading: 'Syne', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --nx-fs-h1: clamp(2.5rem, 5vw, 4rem);
  --nx-fs-h2: clamp(1.85rem, 3.5vw, 2.75rem);
  --nx-fs-body-lg: 1.125rem;
  --nx-fs-body: 1rem;
  --nx-fs-eyebrow: 0.8125rem;

  --nx-lh-h1: 1.1;
  --nx-lh-h2: 1.25;
  --nx-lh-body-lg: 1.6;
  --nx-lh-body: 1.7;

  /* Spacing Scale */
  --nx-space-xs: 12px;
  --nx-space-sm: 16px;
  --nx-space-md: 24px;
  --nx-space-xl: 32px;

  /* Radius Scale */
  --nx-radius-sm: 8px;
  --nx-radius-md: 14px;
  --nx-radius-lg: 20px;
  --nx-radius-pill: 9999px;

  /* Transitions */
  --nx-ease-smooth: cubic-bezier(0.2, 0.8, 0.2, 1);
  --nx-ease-curtain: cubic-bezier(0.77, 0, 0.175, 1);
  --nx-dur-fast: 250ms;
  --nx-dur-normal: 400ms;
  --nx-dur-slow: 1000ms;

  /* Default Color Fallbacks (BYD Navy) */
  --nx-bg-dark-base: #040914;
  --nx-bg-dark-subtle: #081120;
  --nx-bg-surface: #0a1426;
  --nx-bg-surface-elevated: #101f3b;

  --nx-c-primary: #38bdf8;
  --nx-c-primary-rgb: 56, 189, 248;
  --nx-c-accent: #38bdf8;
  --nx-c-accent-glow: rgba(56, 189, 248, 0.35);

  --nx-card-border: rgba(56, 189, 248, 0.18);
  --nx-c-border: rgba(56, 189, 248, 0.18);

  --nx-c-heading: #f8fafc;
  --nx-c-muted: #94a3b8;
} /* <-- WAJIB DITUTUP DI SINI */

/* ==========================================================================
   TIER 2: THEME TOKENS VIA [data-theme]
   ========================================================================== */

/* 1. TEMA: BYD NAVY / SEAL (Default Dark EV Showcase) */
[data-theme="byd-navy"],
[data-theme="seal"],
.theme-byd-navy,
.theme-seal {
  --nx-bg-dark-base: #040914;
  --nx-bg-dark-subtle: #081120;
  --nx-bg-surface: #0a1426;
  --nx-bg-surface-elevated: #101f3b;

  --nx-c-primary: #38bdf8;
  --nx-c-primary-rgb: 56, 189, 248;
  --nx-c-accent: #38bdf8;
  --nx-c-accent-glow: rgba(56, 189, 248, 0.35);

  --nx-card-border: rgba(56, 189, 248, 0.18);
  --nx-c-border: rgba(56, 189, 248, 0.18);

  --nx-c-heading: #f8fafc;
  --nx-c-muted: #94a3b8;
}

/* 2. TEMA: ATTO 1 (SPROUT YELLOW / ELECTRIC LIME ACCENT) */
[data-theme="atto1"],
.theme-atto1 {
  --nx-bg-dark-base: #080c10;
  --nx-bg-dark-subtle: #0e131a;
  --nx-bg-surface: #141b24;
  --nx-bg-surface-elevated: #1c2633;

  --nx-c-primary: #eab308;
  --nx-c-primary-rgb: 234, 179, 8;
  --nx-c-accent: #eab308;
  --nx-c-accent-glow: rgba(234, 179, 8, 0.35);

  --nx-card-border: rgba(234, 179, 8, 0.2);
  --nx-c-border: rgba(234, 179, 8, 0.2);

  --nx-c-heading: #ffffff;
  --nx-c-muted: #94a3b8;
}

/* 3. TEMA: LIGHT MODE (Clean Slate & Deep Ocean Blue) */
[data-theme="light"],
.theme-light {
  --nx-bg-dark-base: #f1f5f9;
  --nx-bg-dark-subtle: #e2e8f0;
  --nx-bg-surface: #ffffff;
  --nx-bg-surface-elevated: #f8fafc;

  --nx-c-primary: #0284c7;
  --nx-c-primary-rgb: 2, 132, 199;
  --nx-c-accent: #0284c7;
  --nx-c-accent-glow: rgba(2, 132, 199, 0.25);

  --nx-card-border: rgba(15, 23, 42, 0.1);
  --nx-c-border: rgba(15, 23, 42, 0.1);

  --nx-c-heading: #0f172a;
  --nx-c-muted: #64748b;