/* Shared design tokens used by the frontend and the WordPress editor. */
:root {
  --ns-bg: #fff;
  --ns-bg-deep: #f2f6fb;
  --ns-card: #fff;
  --ns-surface-soft: #f3f7fb;
  --ns-border: #d9e3ee;
  --ns-text: #10233e;
  --ns-muted: #52667c;
  --ns-faint: #71859a;
  --ns-blue: #1769e0;
  --ns-blue-bright: #2f7cf0;
  --ns-accent: #1769e0;
  --ns-accent-hover: #2f7cf0;
  --ns-green: #18794e;
  --ns-white: #fff;
  --ns-radius: 18px;
  --ns-radius-sm: 12px;
  --ns-radius-xs: 8px;
  --ns-radius-md: 16px;
  --ns-radius-lg: 24px;
  --ns-shadow: 0 22px 60px rgb(15 41 70 / 0.11);
  --ns-container: 1460px;
  --ns-container-gutter: 40px;
  --ns-content-width: 1040px;
  --ns-scroll-offset: 112px;
  --ns-header-offset: 20px;
  --ns-header-height: 60px;
  --ns-header-overlay-top: calc(
    var(--ns-header-offset) + var(--ns-header-height) + var(--ns-space-1)
  );
  --ns-control-height: 48px;
  --ns-control-height-compact: 40px;
  --ns-menu-item-height: 40px;
  --ns-touch-target: 44px;
  --ns-size-xs: 12px;
  --ns-size-sm: 14px;
  --ns-size-base: 16px;
  --ns-size-body: 18px;
  --ns-size-lead: 20px;
  --ns-size-h3: 30px;
  --ns-size-h2: 40px;
  --ns-size-display: 64px;
  --ns-space-tight: 4px;
  --ns-space-1: 8px;
  --ns-space-2: 12px;
  --ns-space-3: 16px;
  --ns-space-4: 24px;
  --ns-space-5: 32px;
  --ns-space-6: 48px;
  --ns-space-7: 64px;
  --ns-space-8: 96px;
  --ns-space-hero-top: 140px;
  --ns-space-hero-bottom: 40px;
}

/*
 * Width-based layout breakpoints used across the theme:
 * mobile <=767px, tablet portrait 768-1023px, tablet landscape 1024-1279px,
 * desktop >=1280px.
 */