/* ============================================================
   Mahaney Madness — shared brand system
   Fonts · color tokens · radius/shadow · buttons · nav
   Linked from every page so the site reads as one brand.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Saira:wght@400;500;600;700&family=Saira+Condensed:wght@500;600;700;800&display=swap');

:root {
  /* brand blue (single accent, kept) */
  --blue: #0047AB;
  --blue-dark: #003380;
  --blue-tint: #eef3fb;

  /* neutral palette */
  --ink: #14171f;
  --slate-700: #3a4150;
  --slate-500: #6a7383;
  --slate-400: #8b93a1;
  --slate-300: #c9ced8;
  --slate-200: #dde1e8;
  --slate-100: #eef1f5;
  --paper: #f7f8fa;
  --white: #ffffff;

  /* radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* shadow */
  --sh-1: 0 1px 2px rgba(20,23,31,.06), 0 1px 3px rgba(20,23,31,.10);
  --sh-2: 0 6px 18px rgba(20,23,31,.10);
  --sh-3: 0 18px 48px rgba(20,23,31,.18);

  /* type */
  --font-display: 'Saira Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Saira', system-ui, 'Segoe UI', sans-serif;
}

/* ── typography primitives ── */
.mm-display {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.95;
}
.mm-eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.8rem;
  color: var(--blue);
}

/* ── button system ── */
.btn {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 1rem;
  padding: 0.85em 1.7em;
  border-radius: var(--r-md);
  border: 2px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  white-space: nowrap;
  transition: background .2s, border-color .2s, color .2s, transform .05s;
  text-decoration: none;
  line-height: 1;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn--primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.btn--ghost { background: #fff; color: var(--ink); border-color: var(--slate-300); }
.btn--ghost:hover { border-color: var(--blue); color: var(--blue); }
.btn--lg { font-size: 1.15rem; padding: 1.05em 2.3em; }
.btn--sm { font-size: 0.82rem; padding: 0.7em 1.3em; }

/* ── shared nav ── */
.mm-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 40px; background: #fff; border-bottom: 1px solid var(--slate-100);
}
.mm-logo {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: 1.7rem; letter-spacing: 0.02em; color: var(--ink); line-height: 0.92;
  text-decoration: none;
}
.mm-logo .accent { color: var(--blue); }
.mm-logo .sub {
  font-family: var(--font-body); font-weight: 600; font-size: 0.5rem;
  letter-spacing: 0.22em; color: var(--slate-400); margin-top: 3px; text-transform: uppercase;
}
.mm-nav-links { display: flex; gap: 26px; align-items: center; }
.mm-nav-links a {
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--slate-700);
  text-decoration: none; transition: color .2s;
}
.mm-nav-links a:hover { color: var(--blue); }
.mm-nav-links a.active { color: var(--blue); }