/* ═══════════════════════════════════════════════════════════════════════════
   MASSAGE MASTERS — DESIGN TOKENS
   Ultra-black. Six colour roles, one accent, no shadows for elevation.
   Every foreground/background pair in here is measured, not assumed:
   the lowest ratio anywhere in the system is 4.98:1 (--mm-text-3 on
   --mm-surface-2), which clears WCAG AA on every surface.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── 1. BASE ────────────────────────────────────────────────────────────
     Not #000. Pure black kills every elevation cue and crushes to a void
     on OLED phones. */
  --mm-bg: #0a0a0a;

  /* ── 2. SURFACE — elevation by tint, never by shadow ── */
  --mm-surface-1: #121212;
  --mm-surface-2: #1a1a1a;

  /* ── 3. LINE — the primary structural device ── */
  --mm-line: rgba(255, 255, 255, 0.09);
  --mm-line-strong: rgba(255, 255, 255, 0.17);

  /* ── 4. TEXT ──
     17.3:1 / 7.8:1 / 5.6:1 on --mm-bg. No alpha-white text anywhere. */
  --mm-text: #f2efe9;
  --mm-text-2: #a8a29a;
  --mm-text-3: #8e8880;

  /* ── 5. ACCENT — one, and only one. Brass, 8.2:1 on --mm-bg. ── */
  --mm-accent: #c6a15b;
  --mm-accent-hi: #dcb876;
  --mm-accent-dim: rgba(198, 161, 91, 0.14);
  --mm-accent-line: rgba(198, 161, 91, 0.35);

  /* ── TYPE ── */
  --mm-font-display: "Archivo", "Archivo Fallback", system-ui, -apple-system,
    "Segoe UI", sans-serif;
  --mm-font-body: "Public Sans", "Public Sans Fallback", system-ui, -apple-system,
    "Segoe UI", sans-serif;

  --t-display: clamp(2.75rem, 6.2vw, 4.5rem);
  --t-h1: clamp(2.25rem, 4.4vw, 3.25rem);
  --t-h2: clamp(1.75rem, 3vw, 2.5rem);
  --t-h3: 1.375rem;
  --t-h4: 1.0625rem;
  --t-body-l: 1.125rem;
  --t-body: 1rem;
  --t-small: 0.875rem;
  --t-label: 0.75rem;

  /* ── SPACE — 4px base, non-linear ── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --s-11: 160px;

  /* Contextual spacing — one place to retune the whole rhythm. */
  --space-section: var(--s-10);
  --space-gutter: var(--s-6);
  --space-grid-gap: var(--s-5);
  --space-card: var(--s-6);
  --space-header-grid: var(--s-8);

  --mm-container: 1200px;
  --mm-measure: 68ch;
  --mm-measure-tight: 65ch;

  /* ── RADIUS ── */
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-full: 999px;

  /* ── MOTION — 150–200ms, opacity and transform only ── */
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --dur: 180ms;
  --dur-fast: 150ms;

  /* Shadow exists for exactly two things: the sticky call button and the
     scrolled nav. Nowhere else. */
  --mm-ambient: 0 8px 32px rgba(0, 0, 0, 0.6);
}

@media (max-width: 1023px) {
  :root {
    --space-section: var(--s-9);
    --space-gutter: var(--s-5);
    --space-grid-gap: var(--s-4);
    --space-card: var(--s-5);
    --space-header-grid: var(--s-7);
  }
}

@media (max-width: 767px) {
  :root {
    --space-section: var(--s-8);
    --space-gutter: var(--s-4);
  }
}

/* ── Page-scoped sub-token: /veterans is the only page where a second
      colour carries meaning. --mm-flag is 5.05:1 and safe for text;
      --mm-flag-deep is 3.0:1 — rules and fills only, never text. ── */
[data-page="veterans"] {
  --mm-flag: #ce5b63;
  --mm-flag-deep: #a8323c;
}

/* ── FOCUS — the old site had zero :focus rules. Non-negotiable. ── */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--mm-accent-hi);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}