/* Recon — parent palette and fonts extracted from overwatch-av.com, 2026-10-24.
   Component sizing and responsive choices below are Recon recommendations. */
:root {
  color-scheme: dark;
  --recon-gold: oklch(81.5% .098 89.5);
  --recon-ink: oklch(18.8% 0 0);
  --recon-graphite: oklch(30.2% 0 0);
  --recon-signal: oklch(96.5% .008 85);
  --recon-speed: oklch(32.3% .113 259.5);
  --recon-alert: oklch(53.9% .222 21.5);
  --recon-card: oklch(23.2% 0 0);
  --recon-muted: oklch(26% 0 0);
  --recon-muted-text: oklch(72% 0 0);
  --recon-border: oklch(32.5% 0 0);
  --recon-bg: var(--recon-ink);
  --recon-text: var(--recon-signal);
  --recon-action: var(--recon-gold);
  --recon-action-text: var(--recon-ink);
  --recon-focus: var(--recon-gold);
  --recon-font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --recon-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  --recon-radius: .25rem;
  --recon-container: 72rem;
  --recon-space-1: .25rem;
  --recon-space-2: .5rem;
  --recon-space-3: .75rem;
  --recon-space-4: 1rem;
  --recon-space-6: 1.5rem;
  --recon-space-8: 2rem;
  --recon-space-12: 3rem;
  --recon-space-16: 4rem;
  --recon-space-24: 6rem;
  --recon-space-32: 8rem;
}
.recon-surface { background: var(--recon-bg); color: var(--recon-text); font-family: var(--recon-font-sans); -webkit-font-smoothing: antialiased; }
.recon-container { width: min(var(--recon-container), calc(100% - 3rem)); margin-inline: auto; }
.recon-section { padding-block: 6rem; }
.recon-heading { font-weight: 600; letter-spacing: -.025em; line-height: 1.1; }
.recon-display { font-size: clamp(2.25rem, 5vw, 3.75rem); }
.recon-label { font: 400 .6875rem/1.5 var(--recon-font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--recon-muted-text); }
.recon-card { background: var(--recon-card); border: 1px solid var(--recon-border); border-radius: var(--recon-radius); padding: 1.5rem; }
.recon-button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: .75rem 1.5rem; border: 1px solid transparent; border-radius: var(--recon-radius); background: var(--recon-action); color: var(--recon-action-text); font: 600 .875rem/1.4 var(--recon-font-sans); text-decoration: none; cursor: pointer; transition: filter .15s; }
.recon-button:hover { filter: brightness(1.08); }
.recon-button-secondary { background: transparent; border-color: var(--recon-border); color: var(--recon-signal); }
.recon-surface :focus-visible { outline: 2px solid var(--recon-focus); outline-offset: 4px; }
.recon-surface ::selection { background: var(--recon-gold); color: var(--recon-ink); }
@media (min-width: 48rem) {
  .recon-container { width: min(var(--recon-container), calc(100% - 5rem)); }
  .recon-section { padding-block: 8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .recon-surface *, .recon-surface *::before, .recon-surface *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}