/* Design tokens. Single source of truth for color, type and shape. */

:root {
  /* Brand ink */
  --nx-ink: #0E1C2A;
  --nx-ink-2: #15273A;
  --nx-ink-3: #1E3349;
  --nx-ink-4: #0B1520;

  /* Bone (light surfaces) */
  --nx-bone: #FAFAFA;
  --nx-bone-2: #F3F3F1;
  --nx-bone-3: #E8E8E5;
  --nx-white: #ffffff;

  /* Accent */
  --nx-billing: #10B981;
  --nx-billing-2: #34D399;
  --nx-billing-hover: #0E9E70;
  --nx-billing-soft: #D1FAE5;

  /* Status */
  --nx-success: #22C55E;
  --nx-success-ink: #15803D;
  --nx-warning: #F59E0B;
  --nx-warning-ink: #B45309;
  --nx-danger: #EF4444;
  --nx-danger-ink: #B91C1C;
  --nx-info: #3B82F6;
  --nx-info-ink: #1D4ED8;

  /* Neutrals */
  --nx-100: #F1F5F9;
  --nx-200: #E2E8F0;
  --nx-300: #CBD5E1;
  --nx-400: #94A3B8;
  --nx-500: #64748B;
  --nx-600: #475569;
  --nx-700: #334155;
  --nx-800: #1E293B;

  /* WhatsApp brand */
  --nx-whatsapp: #25D366;

  /* Typography */
  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Shape */
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 18px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* Layout */
  --shell: 1120px;
  --shell-wide: 1200px;
  --gutter: 20px;
  /* Height of the sticky site header. Anything else that pins itself to the
   * top of the viewport offsets by this so it lands under the bar. */
  --header-h: 70px;
  --section-y: clamp(72px, 9vw, 120px);
}