/* ============================================================
   NextGen Prime — Brand Design Tokens
   Drop this file in any project and use the CSS variables.
   Fonts: Montserrat (display) + Inter (body) — both free on Google Fonts.
   ============================================================ */
:root {
  /* ---- Brand core (the signature gradient) ---- */
  --ngp-blue:        #199FCE;  /* primary / Sky */
  --ngp-blue-deep:   #337CB7;
  --ngp-indigo:      #4B65B1;
  --ngp-violet:      #6251AA;
  --ngp-purple:      #8B4BA9;  /* Prime purple */
  --ngp-swoosh-1:    #2D8BBE;
  --ngp-swoosh-2:    #595AAB;

  /* ---- Primary roles ---- */
  --brand-primary:   #1B9FD1;  /* main interactive colour */
  --brand-secondary: #8B4BA9;
  --brand-accent:    #4B65B1;

  /* ---- Neutrals: ink -> paper ---- */
  --ink-900: #0B0B14;  /* near-black (PRIME) */
  --ink-800: #14122A;
  --ink-700: #241D3F;
  --slate-600: #4A4470;
  --slate-500: #6B6480;
  --slate-400: #9A93B8;
  --slate-300: #C7C1E0;
  --mist-200: #E7E3F3;
  --mist-100: #F4F2FB;
  --paper:    #FBFAFF;
  --white:    #FFFFFF;

  /* ---- Semantic ---- */
  --success: #2F9E6B;
  --warning: #E0952B;
  --danger:  #D64545;
  --info:    #1B9FD1;

  /* ---- Gradients ---- */
  --grad-brand:  linear-gradient(120deg, #199FCE 0%, #4B65B1 52%, #8B4BA9 100%);
  --grad-hero:   linear-gradient(135deg, #199FCE 0%, #4B65B1 50%, #8B4BA9 100%);
  --grad-swoosh: linear-gradient(90deg, #2D8BBE 0%, #595AAB 100%);
  --grad-ink:    linear-gradient(160deg, #14122A 0%, #0B0B14 100%);

  /* ---- Typography ---- */
  --font-display: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600;
  --fw-bold: 700;    --fw-extrabold: 800; --fw-black: 900;

  --text-xs:  0.75rem;   --text-sm:  0.875rem; --text-base: 1rem;
  --text-lg:  1.25rem;   --text-xl:  1.5rem;   --text-2xl: 1.953rem;
  --text-3xl: 2.441rem;  --text-4xl: 3.052rem; --text-5xl: 3.815rem;
  --leading-tight: 1.15; --leading-normal: 1.5; --leading-relaxed: 1.7;
  --tracking-display: -0.02em; --tracking-wide: 0.06em;

  /* ---- Radius / shadow / spacing ---- */
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(20,18,42,.08);
  --shadow-md: 0 8px 24px rgba(20,18,42,.12);
  --shadow-lg: 0 18px 48px rgba(20,18,42,.20);
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
}

/* Handy utility classes */
.ngp-gradient-text {
  background: var(--grad-brand); -webkit-background-clip: text;
  background-clip: text; color: transparent;
}
.ngp-btn-primary {
  background: var(--grad-brand); color: #fff; border: 0;
  font-family: var(--font-display); font-weight: var(--fw-bold);
  border-radius: var(--radius-md); padding: 12px 22px; cursor: pointer;
}
.ngp-surface-dark { background: var(--grad-ink); color: var(--mist-100); }