/* ==========================================================================
   BLUEPRINT AWESOME — DESIGN TOKENS
   Shared across every current and future page (corporate, personal training,
   online coaching, locations, content, merch). Never redefine these values
   inside a page file — add new pages by consuming these tokens so the whole
   site stays visually one brand as it grows.
   ========================================================================== */

:root{
  /* ---- Brand blue: sampled from the logo (#0066cc). Kept for anything that
     must match the mark exactly — buttons, links, the logo itself. ---- */
  --blue: #0066cc;
  --blue-rgb: 0,102,204;

  /* ---- Deep blue: same hue, darkened for running text. #0066cc on white is
     5.6:1 contrast (passes WCAG AA, 4.5:1 minimum, but not AAA's 7:1). Small
     grey/blue body copy read on a phone outdoors or under gym lighting
     benefits from AAA. #004a94 measures 8.7:1 on white, so headings and body
     text use this shade; #0066cc is reserved for interactive elements and the
     logo, where AA is the correct standard (WCAG treats UI components and
     large brand marks differently from body text). ---- */
  --blue-deep: #004a94;
  --blue-navy: #062544;   /* near-black navy — reversed "blueprint sheet" backgrounds */
  --blue-navy-2: #0a3462; /* secondary navy, slightly lighter, for depth on navy sections */

  /* ---- Annotation red: blueprints were historically marked up by hand in
     red pencil/ink for corrections and callouts. Used sparingly for stamps,
     "coming soon" markers and the one or two things per page that should
     read as an annotation rather than as printed content. ---- */
  --annotation: #c8461e;
  --annotation-rgb: 200,70,30;

  /* ---- Paper + line: the page itself reads as a drafting sheet. ---- */
  --paper: #eef4fb;
  --paper-line: rgba(0,102,204,0.16);
  --white: #ffffff;
  --ink: #0a1f33;
  --ink-soft: #435a72;
  --border: #c7d7e8;

  /* ---- Type: a display serif with the drafted, lettering-plate feel of the
     wordmark; a technical sans for reading; a mono for anything that should
     look measured — labels, stats, stamps, nav eyebrows. ---- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Scale: fluid, mobile-first. clamp() keeps a phone from ever getting
     desktop-sized type while still scaling up on larger screens. ---- */
  --step-6: clamp(2.2rem, 6.5vw + 1rem, 4.4rem);   /* H1 */
  --step-5: clamp(1.7rem, 4vw + 1rem, 2.75rem);    /* H2 */
  --step-4: clamp(1.35rem, 2.2vw + 1rem, 1.75rem); /* H3 */
  --step-3: clamp(1.125rem, 1vw + 1rem, 1.3rem);   /* lead paragraph */
  --step-2: 1rem;                                  /* body */
  --step-1: 0.875rem;                              /* small */
  --step-0: 0.75rem;                               /* mono labels */

  /* ---- Spacing + rhythm ---- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;

  --radius: 2px;          /* drafted corners: sharp, not soft/app-like */
  --container: 1180px;
  --gutter: clamp(1.25rem, 5vw, 3rem);

  --ease: cubic-bezier(.4,0,.2,1);
  --dur: 0.35s;
}

@media (prefers-reduced-motion: reduce){
  :root{ --dur: 0ms; }
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}