/* NitroJen spacing, radius, layout and breakpoints. 4px base. */
:root {
  --nj-space-0: 0;
  --nj-space-1: 4px;
  --nj-space-2: 8px;
  --nj-space-3: 12px;
  --nj-space-4: 16px;
  --nj-space-5: 20px;
  --nj-space-6: 24px;
  --nj-space-8: 32px;
  --nj-space-10: 40px;
  --nj-space-12: 48px;
  --nj-space-16: 64px;
  --nj-space-20: 80px;
  --nj-space-24: 96px;
  --nj-space-28: 112px;

  /* Applied spacing */
  --nj-page-margin: 40px;          /* desktop; 32 laptop, 24 tablet, 16 mobile */
  --nj-section-gap: 108px;         /* marketing section padding (78px mobile) */
  --nj-section-gap-product: 48px;
  --nj-card-padding: 24px;
  --nj-card-padding-lg: 32px;
  --nj-form-gap: 20px;             /* between fields */
  --nj-field-gap: 6px;             /* label -> control -> helper */
  --nj-toolbar-gap: 8px;
  --nj-toolbar-height: 64px;
  --nj-modal-padding: 32px;
  --nj-nav-gap: 28px;

  /* Radius */
  --nj-radius-xs: 6px;    /* chips inside controls, checkboxes */
  --nj-radius-sm: 8px;    /* inputs in dense panels, small tiles, menu items */
  --nj-radius-md: 12px;   /* buttons, inputs, icon tiles */
  --nj-radius-lg: 16px;   /* cards, image frames */
  --nj-radius-xl: 20px;   /* modals, large panels */
  --nj-radius-2xl: 28px;  /* marketing showcase panels only */
  --nj-radius-pill: 999px;

  /* Borders */
  --nj-border-width: 1px;
  --nj-border-width-strong: 2px;

  /* Layout */
  --nj-content-max: 1180px;     /* marketing */
  --nj-app-max: 1440px;         /* product library pages */
  --nj-reading-max: 680px;      /* long-form text (55–75ch) */
  --nj-course-max: 864px;       /* learning content column */
  --nj-tap-min: 44px;
  --nj-icon-stroke: 1.75;

  /* Breakpoints (reference — use in media queries as literals) */
  --nj-bp-mobile: 480px;
  --nj-bp-tablet: 720px;
  --nj-bp-laptop: 1024px;
  --nj-bp-desktop: 1280px;
  --nj-bp-wide: 1440px;
}