/* 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; see docs/frontend.md. */

*, *::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;
    /* The border of a chosen option in a segmented control or chip row. */
    --border-chosen: color-mix(in srgb, var(--text) 24%, var(--border));
    --accent: #f5a623;
    --accent-dim: rgba(245,166,35,.15);
    --brand: #B897D8;
    --text: #e8e8f0;
    --text-muted: #8888a8;
    --red: #e05555;
    --green: #60b060;
    /* Waiting on someone else, such as a report under investigation (matches the processing badge). */
    --blue: #64a0ff;
    --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;
    --metric-stardust: var(--brand);
    --stardust-pink: #e46fb0;
    --metric-candy: var(--accent);
    --metric-candy-xl: var(--brand);
    --radius: 12px;

    /* Light palette for the exported Progress image, independent of the page. */
    --share-bg: #ffffff;
    --share-surface: #f6f4fa;
    --share-text: #282337;
    --share-muted: #6f687c;
    --share-border: #e3deeb;

    /* In-game palette for the ScreenshotMock component. These copy the
       Pokémon GO client, not the DataDitto theme, so they stay light. */
    --mock-pokedex-bg: linear-gradient(180deg, #b7e9f3 0%, #a4e0ee 100%);
    --mock-pokedex-ink: #1c86b8;
    --mock-pokedex-card: #e6f7fb;
    --mock-pokedex-stripe: linear-gradient(135deg, #39b7ea, #1e9fe0);
    --mock-pokedex-tab: #ffffff;
    --mock-team-valor: radial-gradient(120% 80% at 50% 0%, #f4b8c8 0%, #f4d3d8 35%, #e8c8d2 70%, #d9b8c4 100%);
    --mock-team-mystic: radial-gradient(120% 80% at 50% 0%, #b8c8f4 0%, #c8d3f8 35%, #b8c4e8 70%, #98b4d9 100%);
    --mock-team-instinct: radial-gradient(120% 80% at 50% 0%, #f3e8c8 0%, #f0dfb8 35%, #e8d3a8 70%, #d8c398 100%);
    --mock-team-harmony: radial-gradient(120% 80% at 50% 0%, #b9e6cc 0%, #ccebd8 35%, #acd8c4 70%, #8fc3ac 100%);
    --mock-team-valor-edge: #ee3f4f;
    --mock-team-mystic-edge: #3c7be0;
    --mock-team-instinct-edge: #f2c230;
    --mock-team-harmony-edge: #4caf7d;
    --mock-team-valor-tint: #fde8eb;
    --mock-team-mystic-tint: #e6eefc;
    --mock-team-instinct-tint: #fdf6e1;
    --mock-team-harmony-tint: #e5f5ec;
    --mock-detail-bg: linear-gradient(180deg, #f9fdf6 0%, #eef8ea 100%);
    --mock-detail-edge: #9ed69a;
    --mock-ink: #3f5f5f;
    --mock-ink-muted: #6b8585;
    --mock-panel: #ffffff;
    --mock-pill: #8597ae;
    --mock-close: #23838a;
    --mock-close-ring: #9fe1cb;
    --mock-progress: #2fd0c8;
    --mock-progress-track: #dde2e2;
}