/* Breakpoints (convention — CSS custom properties can't be used in @media):
 *   ≤600px phone · ≤700px large phone / small tablet · ≤900px tablet
 * Legacy code is desktop-first (max-width). New or rewritten components are
 * written mobile-first with min-width: 601px / 701px / 901px.
 * No other widths without a superseding ADR — see docs/adr/frontend/0005. */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, picture, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
a { text-decoration: none; }
[hidden] { display: none !important; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

:root {
    --bg: #0f0f13;
    --surface: #1a1a23;
    --surface-2: #22222e;
    --border: #2e2e3e;
    --accent: #f5a623;
    --accent-dim: rgba(245,166,35,.15);
    --brand: #B897D8;
    --text: #e8e8f0;
    --text-muted: #8888a8;
    --red: #e05555;
    --green: #60b060;
    --tier-bronze: #cd7f32;
    --tier-silver: #c0c0c0;
    --tier-silver-text: #b8b8c8;
    --tier-gold: #d5a900;
    --tier-gold-bright: #ffd700;
    --tier-platinum: #9fb7d9;
    --metric-total-xp: #fbbf24;
    --metric-pokemon-caught: #f87171;
    --metric-pokestops-visited: #60a5fa;
    --metric-distance-walked: #34d399;
    --radius: 12px;
}