/* ==========================================================================
   Nexsage Design Tokens — single source of truth
   Derived from brand_info/Nexsage design idea.html (rendered comp) + logo sampling.
   Decisions locked 2026-06-28: PRIMARY CTA = blue #2563EB; teal #28AFB7 = secondary accent.
   No hardcoded hex in components — always reference these vars.
   ========================================================================== */
:root {
  /* ---- Brand core ---- */
  --nx-navy:        #0B1B3F;  /* deep brand navy — hero bg / dark band / footer */
  --nx-navy-ink:    #222A41;  /* exact logo "NEX" navy — headings on light */
  --nx-indigo:      #1E3A8A;  /* gradient depth / secondary brand */
  --nx-blue:        #2563EB;  /* PRIMARY CTA / links / primary action */
  --nx-blue-700:    #1D4ED8;  /* primary hover */
  --nx-blue-800:    #1E40AF;  /* primary pressed */
  --nx-blue-100:    #DBEAFE;  /* blue tint — soft fills, chips */
  --nx-teal:        #28AFB7;  /* SECONDARY ACCENT — logo "SAGE"; highlights, accents */
  --nx-teal-700:    #1E8A91;  /* teal hover/pressed */
  --nx-teal-100:    #D6F1F3;  /* teal tint — chips, soft fills */
  --nx-cyan:        #22D3EE;  /* light highlight — sparingly (dots, glints) */

  /* ---- Neutrals ---- */
  --nx-ink:         #0F172A;  /* body text */
  --nx-slate:       #475569;  /* secondary text */
  --nx-slate-400:   #94A3B8;  /* muted text on light */
  --nx-line:        #E2E8F0;  /* borders */
  --nx-line-soft:   #EEF2F7;  /* faint borders / dividers */
  --nx-mist:        #F8FAFC;  /* section backgrounds */
  --nx-cloud:       #F1F5F9;  /* alt section background */
  --nx-white:       #FFFFFF;

  /* ---- On-dark neutrals (for navy sections) ---- */
  --nx-on-dark:        #E8EEF8;  /* body text on navy */
  --nx-on-dark-muted:  #9FB0CC;  /* muted text on navy */
  --nx-on-dark-line:   rgba(255,255,255,.12);

  /* ---- States ---- */
  --nx-success:     #16A34A;
  --nx-warning:     #D97706;
  --nx-danger:      #DC2626;

  /* ---- Gradients ---- */
  --nx-grad-cta:    linear-gradient(135deg, #1E3A8A 0%, #2563EB 60%, #2D7CE0 100%); /* hero card / CTA bands */
  --nx-grad-brand:  linear-gradient(135deg, #0B1B3F 0%, #1E3A8A 50%, #28AFB7 100%); /* navy→teal brand sweep */
  --nx-grad-dark:   linear-gradient(180deg, #0B1B3F 0%, #0A1733 100%);              /* dark section */
  --nx-grad-mesh:   radial-gradient(60% 80% at 80% 10%, rgba(37,99,235,.18), transparent 60%),
                    radial-gradient(50% 60% at 10% 90%, rgba(40,175,183,.14), transparent 60%);

  /* ---- Typography ---- */
  --nx-font-sans:   "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --nx-font-mono:   "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --nx-h1:          clamp(2.5rem, 5vw, 4rem);
  --nx-h2:          clamp(2rem, 4vw, 3rem);
  --nx-h3:          1.5rem;
  --nx-h4:          1.25rem;
  --nx-body:        1.0625rem;   /* 17px */
  --nx-small:       0.875rem;
  --nx-eyebrow:     0.78rem;     /* mono uppercase kicker */

  --nx-lh-tight:    1.15;
  --nx-lh-snug:     1.3;
  --nx-lh-body:     1.6;

  --nx-fw-reg:      400;
  --nx-fw-med:      500;
  --nx-fw-sem:      600;
  --nx-fw-bold:     700;
  --nx-fw-x:        800;

  /* ---- Spacing scale (rem) ---- */
  --nx-s-1:   0.25rem;
  --nx-s-2:   0.5rem;
  --nx-s-3:   1rem;
  --nx-s-4:   1.5rem;
  --nx-s-5:   2rem;
  --nx-s-6:   3rem;
  --nx-s-7:   4rem;
  --nx-s-8:   6rem;
  --nx-s-9:   8rem;

  /* ---- Radius ---- */
  --nx-r-sm:   8px;
  --nx-r:      14px;
  --nx-r-lg:   24px;
  --nx-r-pill: 999px;

  /* ---- Shadows ---- */
  --nx-sh-sm:  0 1px 2px rgba(15,23,42,.06);
  --nx-sh:     0 1px 2px rgba(15,23,42,.06), 0 12px 32px -12px rgba(30,58,138,.25);
  --nx-sh-lg:  0 24px 60px -20px rgba(15,23,42,.28);
  --nx-sh-blue: 0 14px 36px -12px rgba(37,99,235,.45);

  /* ---- Layout ---- */
  --nx-container: 1200px;
  --nx-container-wide: 1320px;
  --nx-gutter: clamp(1.25rem, 4vw, 2.5rem);
  --nx-section-y: clamp(3.5rem, 8vw, 8rem);   /* 56px → 128px */
  --nx-header-h: 76px;

  /* ---- Motion ---- */
  --nx-ease:      cubic-bezier(.22,.61,.36,1);
  --nx-ease-out:  cubic-bezier(.16,1,.3,1);
  --nx-dur-fast:  .18s;
  --nx-dur:       .32s;
  --nx-dur-slow:  .6s;

  --nx-z-header: 1000;
  --nx-z-mega:   1010;
  --nx-z-mobile: 1100;
  --nx-z-popup:  2000;
  --nx-z-float:  1500;
}