/* MilSpecWellness — Design Tokens
   Single source of truth: color, spacing, type, motion, layout, breakpoints.
   Load this BEFORE every other stylesheet so vars resolve everywhere. */

:root {
  /* ==========================================================
     COLOR
     ms-* names are pre-existing brand vars (kept for back-compat).
     New tokens are prefixed with -- (semantic) so future components
     don't have to know hex codes.
     ========================================================== */
  --ms-white:       #f7f6f1;
  --ms-cream:       #faf9f5;
  --ms-sage-light:  #e8eedf;
  --ms-sage-mid:    #b8c9a0;
  --ms-olive:       #4a5e38;
  --ms-olive-dark:  #3a4a2c;
  --ms-stone:       #d4c9b0;
  --ms-tan:         #8a7a5a;
  --ms-tan-dark:    #6f5f3f;   /* AA-safe replacement for --ms-tan body copy */
  --ms-dark:        #2e3828;
  --ms-warn:        #a13a2a;

  /* Semantic aliases */
  --c-bg:            var(--ms-white);
  --c-bg-alt:        var(--ms-sage-light);
  --c-bg-cream:      var(--ms-cream);
  --c-bg-dark:       var(--ms-dark);
  --c-text:          var(--ms-dark);
  --c-text-muted:    var(--ms-tan-dark);
  --c-text-on-dark:  var(--ms-sage-light);
  --c-accent:        var(--ms-olive);
  --c-accent-soft:   var(--ms-sage-mid);
  --c-border:        var(--ms-sage-mid);
  --c-border-soft:   var(--ms-sage-light);
  --c-warn:          var(--ms-warn);

  /* ==========================================================
     TYPE
     ========================================================== */
  --font-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Lora', Georgia, serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'Courier New', monospace;

  /* Fluid type scale, mobile-first.
     Lower clamp = mobile floor. Upper = desktop ceiling. vw = the curve. */
  --type-display:  clamp(2.4rem, 8vw,   5.5rem);
  --type-h1:       clamp(2rem,   6vw,   3.5rem);
  --type-h2:       clamp(1.55rem, 4vw,  2.4rem);
  --type-h3:       clamp(1.15rem, 2.5vw, 1.5rem);
  --type-h4:       1.05rem;
  --type-body:     1rem;
  --type-body-lg:  1.075rem;
  --type-small:    0.88rem;
  --type-mono:     0.72rem;
  --type-mono-sm:  0.66rem;

  /* Line heights */
  --lh-tight:    1.05;
  --lh-snug:     1.2;
  --lh-base:     1.5;
  --lh-relaxed:  1.65;

  /* ==========================================================
     SPACING — t-shirt scale, used for paddings/gaps everywhere.
     Replace ad-hoc 1.6rem / 0.85rem / 1.2rem values with these.
     ========================================================== */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  3rem;
  --s-8:  4rem;
  --s-9:  6rem;
  --s-10: 8rem;

  /* Section rhythm — fluid, mobile-tight, desktop-roomy. */
  --section-pad-y: clamp(2.5rem, 7vw, 6rem);
  --section-pad-x: clamp(1rem, 4vw, 2rem);

  /* ==========================================================
     LAYOUT
     ========================================================== */
  --container-max:        1300px;
  --container-narrow-max: 820px;
  --content-pad:          clamp(1rem, 4vw, 2rem);

  /* ==========================================================
     MOTION
     ========================================================== */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    0.15s;
  --dur-base:    0.25s;
  --dur-slow:    0.4s;

  /* ==========================================================
     ELEVATION (use sparingly — flat is the brand)
     ========================================================== */
  --shadow-sm: 0 1px 2px rgba(46,56,40,0.06);
  --shadow-md: 0 4px 16px rgba(46,56,40,0.10);
  --shadow-lg: 0 12px 36px rgba(46,56,40,0.16);

  /* ==========================================================
     LAYERS / Z-INDEX
     The nav must paint ABOVE the backdrop because the drawer is
     a descendant of the nav. A descendant's z-index is clamped
     inside its ancestor's stacking context, so if --z-nav were
     below --z-backdrop, the backdrop would cover the drawer
     (and link taps would never reach the links).
     ========================================================== */
  --z-bottom-cta: 90;
  --z-backdrop:   199;
  --z-nav:        250;
  --z-drawer:     260;
  --z-modal:      300;
  --z-toast:      400;

  /* ==========================================================
     SAFE AREAS (iPhone notch, dynamic island, gesture bar)
     ========================================================== */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);

  /* ==========================================================
     TOUCH TARGETS (Apple HIG 44 / Material 48)
     ========================================================== */
  --tap-min:   44px;
  --tap-comfy: 48px;

  /* ==========================================================
     NAV / FRAME HEIGHTS — referenced by sticky-CTA and scroll math.
     ========================================================== */
  --nav-h:        56px;
  --bottom-cta-h: 64px;
}

/* Tablet+ nav grows a hair so logo + links breathe. */
@media (min-width: 768px) {
  :root { --nav-h: 64px; }
}