/* Global tokens and base styles. Component styles live next to the components in *.razor.css. */

:root {
    color-scheme: dark;

    --bg: #091428;
    --surface: #0f1e36;
    --surface-2: #172a47;
    --border: #253858;
    --text: #e8e2d0;
    --muted: #8b95a9;
    --gold: #c8aa6e;
    --gold-bright: #f0e6d2;
    --win: #0ac8b9;
    --loss: #e84057;

    --space: 1rem;
    --space-s: 0.5rem;
    --radius: 8px;
    --content-width: 960px;

    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
}

main {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: var(--space);
}

h1,
h2,
h3 {
    margin: 0;
    font-weight: 600;
}

small {
    color: var(--muted);
}

.muted {
    color: var(--muted);
}

/* Tier colors, set on an element whose children use var(--tier-color). */
.tier-unranked { --tier-color: var(--muted); }
.tier-iron { --tier-color: #8c7b74; }
.tier-bronze { --tier-color: #b97a57; }
.tier-silver { --tier-color: #a4b4c0; }
.tier-gold { --tier-color: #e0b252; }
.tier-platinum { --tier-color: #4fb3a9; }
.tier-emerald { --tier-color: #3ec27f; }
.tier-diamond { --tier-color: #7b93f5; }
.tier-master { --tier-color: #b863e6; }
.tier-grandmaster { --tier-color: #e8484f; }
.tier-challenger { --tier-color: #f4d27a; }