/* Reach More — design tokens
   Primary direction: ms-17-lumen-index (dark technical grid hero, ice-blue accent,
   Manrope UI type, square-cornered controls, chamfered info card).
   Supporting: ms-b2-rocket-pricing (dark plan cards + spotlight border),
   ms-b2-guardnet-benefits (triptych benefit cards with soft blue blobs),
   ms-01-nexova (multi-column footer, glass mobile menu).
   See DESIGN.md for the full mapping. */

:root {
  /* base surfaces */
  --bg: #050505;
  --bg-elevated: #0d0d0d;
  --bg-card: #121212;
  --bg-card-featured: #1a1d22;

  /* type */
  --fg: #ffffff;
  --fg-muted: rgba(255, 255, 255, 0.62);
  --fg-faint: rgba(255, 255, 255, 0.4);

  /* accent (lumen-index ice blue) */
  --accent: #afddff;
  --accent-hover: #c8e8ff;
  --accent-soft: rgba(175, 221, 255, 0.12);

  /* lines */
  --border: rgba(255, 255, 255, 0.14);
  --border-faint: rgba(255, 255, 255, 0.07);
  --grid-line: rgba(255, 255, 255, 0.05);

  /* accent blobs (guardnet) */
  --blob-blue: #1e3a8a;

  /* paper surface for long-form policy reading */
  --paper-bg: #f6f5f1;
  --paper-fg: #17181a;
  --paper-muted: #53565c;
  --paper-border: rgba(23, 24, 26, 0.12);
  --paper-accent: #1447a3;

  /* type families */
  --font-display: "Space Grotesk", "Manrope", -apple-system, sans-serif;
  --font-body: "Manrope", -apple-system, sans-serif;

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);

  /* layout */
  --gutter: 20px;
  --container: 1180px;
  --measure: 68ch;
}

@media (min-width: 768px) {
  :root {
    --gutter: 35px;
  }
}