/* ============================================================
   Nexlab — Colors & Type Tokens
   Source: Brand Book (Comfortaa + SF Pro, BLACK/Blanco/#5a189a/#3c096c)
   SF Pro is Apple-licensed; we substitute Inter as the closest
   free cross-platform match. See README.md > Typography.

   v2 (2026-06-19): reconciled with the live nexlab.dev build.
   - Primary button is the BLACK PILL (--nx-ink, pill radius); the
     purple gradient is reserved for ONE hero/brand-moment accent.
   - Marketing pages use CREAM (--nx-bg-page) as the base canvas;
     white stays the app/elevated surface.
   - Display/heading sizes are FLUID clamp() ramps (the live
     editorial scale), tracking -0.03em.

   VENDORED VERBATIM from the "Brand - Nexlab" DesignSync project
   (colors_and_type.css). Do not hand-edit — re-sync from the DS.
   ============================================================ */

/* Fonts ------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ── Core palette ───────────────────────────────────────── */
  --nx-black:        #000000;   /* BLACK */
  --nx-white:        #FFFFFF;   /* Blanco */
  --nx-purple:       #5A189A;   /* Primary brand purple */
  --nx-purple-deep:  #3C096C;   /* Secondary / dark brand purple */

  /* ── Extended purple scale (derived, harmonised in OKLCH) ─ */
  --nx-purple-50:    #F5EDFB;
  --nx-purple-100:   #E9D7F7;
  --nx-purple-200:   #D0A9EE;
  --nx-purple-300:   #B27BE2;
  --nx-purple-400:   #8E4DD1;
  --nx-purple-500:   #5A189A;   /* = --nx-purple */
  --nx-purple-600:   #4B118A;
  --nx-purple-700:   #3C096C;   /* = --nx-purple-deep */
  --nx-purple-800:   #2A074E;
  --nx-purple-900:   #180430;

  /* ── Neutrals (warm off-black/white, feel less clinical) ── */
  --nx-ink:          #0B0612;   /* near-black with a hint of purple */
  --nx-ink-2:        #1A1322;
  --nx-gray-900:     #241B2E;
  --nx-gray-800:     #3A2F48;
  --nx-gray-700:     #55485F;
  --nx-gray-600:     #7A6E84;
  --nx-gray-500:     #9E93A6;
  --nx-gray-400:     #BEB5C6;
  --nx-gray-300:     #D8D1DE;
  --nx-gray-200:     #EBE6EF;
  --nx-gray-100:     #F5F1F7;
  --nx-gray-50:      #FBF9FC;
  --nx-cream:        #FAF7FB;   /* warm off-white canvas */

  /* ── Semantic colour roles ─────────────────────────────── */
  --nx-bg:           var(--nx-white);   /* app / elevated surface base */
  --nx-bg-page:      var(--nx-cream);   /* marketing page canvas (v2) — the live site base */
  --nx-bg-elev:      var(--nx-cream);
  --nx-bg-inverse:   var(--nx-ink);
  --nx-surface:      var(--nx-white);
  --nx-surface-2:    var(--nx-gray-50);

  --nx-fg:           var(--nx-ink);         /* primary text */
  --nx-fg-2:         var(--nx-gray-700);    /* secondary text */
  --nx-fg-3:         var(--nx-gray-500);    /* tertiary / captions */
  --nx-fg-inverse:   var(--nx-white);
  --nx-fg-muted:     var(--nx-gray-400);

  --nx-border:       var(--nx-gray-200);
  --nx-border-strong:var(--nx-gray-300);
  --nx-border-focus: var(--nx-purple-500);

  --nx-accent:       var(--nx-purple-500);
  --nx-accent-hover: var(--nx-purple-600);
  --nx-accent-press: var(--nx-purple-700);
  --nx-accent-soft:  var(--nx-purple-50);
  --nx-accent-ink:   var(--nx-white);       /* text on accent */

  /* ── Buttons (v2: black-pill primary; gradient = accent only) ── */
  --nx-btn-primary-bg:        var(--nx-ink);          /* #0B0612 */
  --nx-btn-primary-bg-hover:  var(--nx-purple-700);   /* #3C096C */
  --nx-btn-primary-fg:        var(--nx-white);
  --nx-btn-radius:            var(--nx-radius-pill);   /* pill, not 12px */
  --nx-btn-glow:              var(--nx-shadow-glow);   /* hover glow */
  --nx-btn-accent-bg:         var(--nx-gradient-brand); /* reserve for hero/brand-moment CTA */

  /* ── Feedback / status ─────────────────────────────────── */
  --nx-success:      #1F9D55;
  --nx-success-soft: #E6F4EC;
  --nx-warning:      #E0A200;
  --nx-warning-soft: #FAF1D7;
  --nx-danger:       #C0283F;
  --nx-danger-soft:  #FBE8EB;
  --nx-info:         var(--nx-purple-400);
  --nx-info-soft:    var(--nx-purple-50);

  /* ── Signature gradient (used sparingly, brand accent) ── */
  --nx-gradient-brand: linear-gradient(135deg, #5A189A 0%, #3C096C 100%);
  --nx-gradient-glow:  radial-gradient(circle at 30% 20%, #8E4DD1 0%, #5A189A 40%, #3C096C 100%);
  --nx-gradient-dawn:  linear-gradient(180deg, #FAF7FB 0%, #F5EDFB 100%);

  /* ── Radii ─────────────────────────────────────────────── */
  --nx-radius-xs: 4px;
  --nx-radius-sm: 8px;
  --nx-radius-md: 12px;
  --nx-radius-lg: 16px;
  --nx-radius-xl: 24px;
  --nx-radius-2xl:32px;
  --nx-radius-pill: 999px;

  /* ── Spacing (4px base) ────────────────────────────────── */
  --nx-sp-0: 0;
  --nx-sp-1: 4px;
  --nx-sp-2: 8px;
  --nx-sp-3: 12px;
  --nx-sp-4: 16px;
  --nx-sp-5: 20px;
  --nx-sp-6: 24px;
  --nx-sp-7: 32px;
  --nx-sp-8: 40px;
  --nx-sp-9: 48px;
  --nx-sp-10:64px;
  --nx-sp-11:80px;
  --nx-sp-12:96px;

  /* ── Shadows (soft, warm purple-tint) ──────────────────── */
  --nx-shadow-xs: 0 1px 2px rgba(24, 4, 48, 0.06);
  --nx-shadow-sm: 0 2px 6px rgba(24, 4, 48, 0.08);
  --nx-shadow-md: 0 8px 20px rgba(24, 4, 48, 0.10);
  --nx-shadow-lg: 0 16px 40px rgba(24, 4, 48, 0.14);
  --nx-shadow-xl: 0 32px 64px rgba(24, 4, 48, 0.18);
  --nx-shadow-glow: 0 16px 48px rgba(90, 24, 154, 0.28);
  --nx-shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6);

  /* ── Motion ────────────────────────────────────────────── */
  --nx-ease:         cubic-bezier(0.22, 1, 0.36, 1);
  --nx-ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --nx-ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --nx-dur-fast:     120ms;
  --nx-dur-base:     220ms;
  --nx-dur-slow:     420ms;

  /* ── Typography — families ─────────────────────────────── */
  --nx-font-display: "Comfortaa", "SF Pro Rounded", ui-rounded, system-ui, sans-serif;
  --nx-font-body:    "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --nx-font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* ── Typography — scale (rem, 16px base) ──────────────── */
  --nx-text-xs:   0.75rem;   /* 12 */
  --nx-text-sm:   0.875rem;  /* 14 */
  --nx-text-base: 1rem;      /* 16 */
  --nx-text-md:   1.125rem;  /* 18 */
  --nx-text-lg:   1.25rem;   /* 20 */
  --nx-text-xl:   1.5rem;    /* 24 */
  --nx-text-2xl:  2rem;      /* 32 */
  --nx-text-3xl:  2.5rem;    /* 40 */
  --nx-text-4xl:  3.25rem;   /* 52 */
  --nx-text-5xl:  4.25rem;   /* 68 */

  /* ── Typography — fluid display ramps (v2, match live site) ── */
  --nx-display-fluid: clamp(2.5rem, 6vw, 4.75rem);    /* 40 → 76 (hero) */
  --nx-h1-fluid:      clamp(2.25rem, 4.6vw, 3.5rem);  /* 36 → 56 */
  --nx-h2-fluid:      clamp(1.875rem, 3.4vw, 2.75rem);/* 30 → 44 */

  --nx-leading-tight:  1.08;
  --nx-leading-snug:   1.25;
  --nx-leading-normal: 1.5;
  --nx-leading-loose:  1.7;

  --nx-tracking-tight: -0.03em;
  --nx-tracking-normal: 0;
  --nx-tracking-wide:  0.04em;
  --nx-tracking-caps:  0.08em;
}

/* ============================================================
   Semantic type roles
   ============================================================ */

.nx-display,
h1.nx {
  font-family: var(--nx-font-display);
  font-weight: 700;
  font-size: var(--nx-display-fluid);
  line-height: 1.0;
  letter-spacing: var(--nx-tracking-tight);
  color: var(--nx-fg);
}

.nx-h1 {
  font-family: var(--nx-font-display);
  font-weight: 700;
  font-size: var(--nx-h1-fluid);
  line-height: 1.05;
  letter-spacing: var(--nx-tracking-tight);
}
.nx-h2 {
  font-family: var(--nx-font-display);
  font-weight: 600;
  font-size: var(--nx-h2-fluid);
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.nx-h3 {
  font-family: var(--nx-font-display);
  font-weight: 600;
  font-size: var(--nx-text-2xl);
  line-height: 1.2;
}
.nx-h4 {
  font-family: var(--nx-font-display);
  font-weight: 600;
  font-size: var(--nx-text-xl);
  line-height: 1.25;
}

.nx-eyebrow {
  font-family: var(--nx-font-body);
  font-weight: 600;
  font-size: var(--nx-text-xs);
  line-height: 1;
  letter-spacing: var(--nx-tracking-caps);
  text-transform: uppercase;
  color: var(--nx-purple-500);
}

.nx-body {
  font-family: var(--nx-font-body);
  font-weight: 400;
  font-size: var(--nx-text-base);
  line-height: var(--nx-leading-normal);
  color: var(--nx-fg);
}
.nx-body-lg {
  font-family: var(--nx-font-body);
  font-weight: 400;
  font-size: var(--nx-text-md);
  line-height: var(--nx-leading-normal);
  color: var(--nx-fg);
}
.nx-body-sm {
  font-family: var(--nx-font-body);
  font-weight: 400;
  font-size: var(--nx-text-sm);
  line-height: var(--nx-leading-normal);
  color: var(--nx-fg-2);
}

.nx-caption {
  font-family: var(--nx-font-body);
  font-weight: 500;
  font-size: var(--nx-text-xs);
  line-height: 1.4;
  color: var(--nx-fg-3);
}

.nx-label {
  font-family: var(--nx-font-body);
  font-weight: 500;
  font-size: var(--nx-text-sm);
  line-height: 1.25;
  color: var(--nx-fg);
}

.nx-button-label {
  font-family: var(--nx-font-body);
  font-weight: 600;
  font-size: var(--nx-text-base);
  letter-spacing: -0.005em;
  line-height: 1;
}

.nx-quote {
  font-family: var(--nx-font-display);
  font-weight: 400;
  font-size: var(--nx-text-2xl);
  line-height: 1.3;
  color: var(--nx-fg);
}

.nx-code,
code.nx {
  font-family: var(--nx-font-mono);
  font-size: 0.9em;
  background: var(--nx-gray-100);
  padding: 0.12em 0.4em;
  border-radius: var(--nx-radius-xs);
  color: var(--nx-purple-700);
}

/* ============================================================
   Buttons (v2) — black-pill primary; gradient = brand-moment accent
   ============================================================ */
.nx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--nx-font-body); font-weight: 600; font-size: var(--nx-text-base);
  letter-spacing: -0.005em; line-height: 1; border: none; cursor: pointer;
  padding: 12px 20px; border-radius: var(--nx-btn-radius);
  background: var(--nx-btn-primary-bg); color: var(--nx-btn-primary-fg);
  transition: background var(--nx-dur-base) var(--nx-ease),
              transform var(--nx-dur-base) var(--nx-ease),
              box-shadow var(--nx-dur-base) var(--nx-ease);
}
.nx-btn:hover  { background: var(--nx-btn-primary-bg-hover); transform: translateY(-1px); box-shadow: var(--nx-btn-glow); }
.nx-btn:active { transform: scale(0.98); }
.nx-btn--accent    { background: var(--nx-btn-accent-bg); }
.nx-btn--secondary { background: var(--nx-white); color: var(--nx-ink); border: 1px solid var(--nx-ink); }
.nx-btn--ghost     { background: transparent; color: var(--nx-purple-600); }
.nx-btn--on-dark   { background: var(--nx-white); color: var(--nx-ink); }
.nx-btn--outline-dark { background: transparent; color: var(--nx-white); border: 1px solid rgba(255,255,255,0.25); }