:root{
  /* Brand ramp — purple */
  --nex-purple-50:#F5F3FF;
  --nex-purple-100:#EDE9FE;
  --nex-purple-200:#DDD6FE;
  --nex-purple-300:#C4B5FD;
  --nex-purple-400:#A78BFA;
  --nex-purple-500:#8B5CF6;
  --nex-purple-600:#7C46EE;
  --nex-purple-700:#4F46E5;
  --nex-purple-800:#4E3FA6;
  --nex-purple-900:#3B317F;

  /* Neutrals */
  --nex-white:#FFFFFF;
  --nex-gray-50:#F8FAFC;
  --nex-gray-100:#F2F2F5;
  --nex-gray-200:#E5E7EB;
  --nex-gray-300:#D1D5DB;
  --nex-gray-400:#9CA3AF;
  --nex-gray-500:#6B7280;
  --nex-gray-600:#4B5563;
  --nex-gray-700:#374151;
  --nex-gray-800:#2B2B2B;
  --nex-gray-900:#1F2937;
  --nex-ink:#161B28;

  /* Semantic status */
  --nex-success:#16A34A;
  --nex-success-surface:#ECFDF3;
  --nex-info:#4F46E5;
  --nex-info-surface:#EEF0FE;
  --nex-warning:#D97706;
  --nex-warning-surface:#FFF7ED;
  --nex-error:#DC2626;
  --nex-error-surface:#FEF1F2;

  /* Brand aliases */
  --brand-primary:var(--nex-purple-500);
  --brand-primary-hover:var(--nex-purple-600);
  --brand-primary-active:var(--nex-purple-700);
  --brand-secondary:var(--nex-purple-700);
  --brand-deep:var(--nex-purple-800);
  --brand-tint:var(--nex-purple-100);

  /* Gradients */
  --gradient-brand:linear-gradient(90deg,#8B5CF6 0%,#4E3FA6 100%); /* @kind other */
  --gradient-brand-diagonal:linear-gradient(135deg,#8B5CF6 0%,#4E3FA6 100%); /* @kind other */
  --gradient-deep:linear-gradient(160deg,#1B1636 0%,#0D111B 60%); /* @kind other */

  /* Surfaces */
  --surface-page:var(--nex-gray-50);
  --surface-card:var(--nex-white);
  --surface-subtle:var(--nex-gray-100);
  --surface-tint:var(--nex-purple-50);
  --surface-inverse:var(--nex-ink);
  --surface-brand:var(--brand-deep);
  --surface-pattern:#221B4A; /* @kind color */ /* pattern tiles: dark enough for the negative lockup */

  /* Text */
  --text-heading:var(--nex-gray-900);
  --text-body:var(--nex-gray-700);
  --text-muted:var(--nex-gray-500);
  --text-on-brand:var(--nex-white);
  --text-on-inverse:rgba(255,255,255,.82);
  --text-link:var(--brand-secondary);
  --text-link-hover:var(--brand-primary);

  /* Borders */
  --border-subtle:var(--nex-gray-200);
  --border-strong:var(--nex-gray-300);
  --border-brand:var(--brand-primary);
  --border-inverse:rgba(255,255,255,.16);
  --focus-ring:0 0 0 3px rgba(139,92,246,.32);
}