/* ==========================================================================
   DESIGN TOKENS (XL HOME / XL SATU DESIGN SYSTEM)
   File: token.css
   ========================================================================== */


:root {
  /* ------------------------------------------------------------------------
     1. TYPOGRAPHY FAMILIES
     ------------------------------------------------------------------------ */
  --font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', monospace;

  /* ------------------------------------------------------------------------
     2. BRAND ACCENTS (XL HOME CORE SYSTEM)
     ------------------------------------------------------------------------ */
  --nx-c-primary: #18448A;
  --nx-c-primary-hover: #153a75;
  --nx-c-primary-rgb: 24, 68, 138;
  --nx-c-primary-glow: rgba(24, 68, 138, 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);

  --nx-c-secondary: #05A986;
  --nx-c-secondary-rgb: 5, 169, 134;
  --nx-c-secondary-subtle: #CCF6EC;
  --nx-c-secondary-dark: #005440;

  --nx-c-accent-cyan: #1D90C9;
  --nx-c-accent-turquoise: #20C4F4;
  --nx-c-accent-orange: #F15A22;
  --nx-c-accent-subtle: #ECF9FF;

  /* ------------------------------------------------------------------------
     3. SURFACES & CANVAS
     ------------------------------------------------------------------------ */
  --nx-bg-base: #F8F8F8;
  --nx-bg-subtle: #EFEFEF;
  --nx-bg-surface: #ffffff;
  --nx-bg-elevated: #ffffff;
  --nx-bg-tint-blue: #ECF9FF;
  --nx-bg-blue-subtle: #F0F3FE;

  /* ------------------------------------------------------------------------
     4. TYPOGRAPHY COLORS
     ------------------------------------------------------------------------ */
  --nx-c-heading: #131313;
  --nx-c-lead: #18448A;
  --nx-c-body: #68788A;
  --nx-c-muted: #8C96A2;

  /* ------------------------------------------------------------------------
     5. BORDERS & SHADOWS
     ------------------------------------------------------------------------ */
  --nx-c-border: #E2E2E2;
  --nx-c-border-strong: #A3B4D0;
  --nx-c-border-subtle: #DAEEFF;
  --nx-shadow-card: 0 8px 24px rgba(24, 68, 138, 0.08);

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

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

/* --------------------------------------------------------------------------
   TYPOGRAPHY MAPPINGS
   -------------------------------------------------------------------------- */
.nx-h1 { font-family: var(--font-heading) !important; font-size: var(--nx-fs-5) !important; line-height: var(--nx-lh-tight) !important; font-weight: 800; color: var(--nx-c-heading); margin: 0; }
.nx-h2 { font-family: var(--font-heading) !important; font-size: var(--nx-fs-4) !important; line-height: var(--nx-lh-tight) !important; font-weight: 700; color: var(--nx-c-heading); margin: 0; }
.nx-h3 { font-family: var(--font-heading) !important; font-size: var(--nx-fs-3) !important; line-height: var(--nx-lh-snug) !important; font-weight: 700; color: var(--nx-c-heading); margin: 0; }
.nx-h4 { font-family: var(--font-heading) !important; font-size: var(--nx-fs-2) !important; line-height: var(--nx-lh-snug) !important; font-weight: 700; color: var(--nx-c-heading); margin: 0; }
.nx-lead { font-family: var(--font-body) !important; font-size: var(--nx-fs-1) !important; line-height: var(--nx-lh-relaxed) !important; color: var(--nx-c-body); margin: 0; }
.nx-body { font-family: var(--font-body) !important; font-size: var(--nx-fs-0) !important; line-height: var(--nx-lh-normal) !important; color: var(--nx-c-body); margin: 0; }
.nx-body-sm { font-family: var(--font-body) !important; font-size: var(--nx-fs--1) !important; line-height: var(--nx-lh-normal) !important; color: var(--nx-c-muted); margin: 0; }
.nx-legal { font-family: var(--font-body) !important; font-size: var(--nx-fs--2) !important; line-height: var(--nx-lh-normal) !important; color: var(--nx-c-muted); margin: 0; }