/*
 * @author Emanuele Macera (https://emanuelemacera.com)
 *
 * Skin "Gazzetta": a newspaper for the league. Paper and ink with the red of the logo, condensed uppercase headings,
 * serif for the running text of a story, square corners, hairlines and one thick rule to open a section.
 * A skin is only this: the values of the tokens that lpa.css reads (plus the fonts). Light by default; a dark version
 * for people whose device asks for a dark page. The developer can force one with data-theme="light" or "dark" on <html>.
 *
 * The fonts are self-hosted (css/../fonts): Oswald for headings, Inter for the interface, Source Serif 4 for the text of
 * a story. All three are under the SIL Open Font License.
 */

@font-face { font-family: "Oswald"; src: url("../fonts/oswald-var.woff2") format("woff2"); font-weight: 200 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-4-var.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-4-italic-var.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }

:root {
    color-scheme: light;

    --bg: #f5f4f1;
    --bg-elev: #ffffff;
    --bg-elev-2: #eeede8;
    --line: #d9d8d3;
    --line-strong: #b4b2aa;
    --text: #111215;
    --text-strong: #000000;
    --muted: #666a73;
    --ink: #111215;
    --ink-ink: #ffffff;
    --accent: #d3171f;
    --accent-hover: #a90f16;
    --accent-ink: #ffffff;
    --accent-soft: rgba(211, 23, 31, .07);
    --gold: #b07400;
    --silver: #6f7787;
    --bronze: #a15a22;
    --ok: #12805a;
    --warn: #9a6500;
    --err: #c62828;
    --info: #1b5fd1;

    --header-bg: #ffffff;
    --btn-hover: #111215;
    --row-hover: rgba(17, 18, 21, .035);
    --shadow: 0 10px 30px rgba(20, 24, 40, .14);
    --bar-bg: #0b0c0e;
    --bar-text: #d6d8dd;
    --bar-muted: #8b8f98;
    --bar-line: #2a2d34;

    --radius: 0;
    --radius-sm: 8px;
    --radius-pill: 999px;
    /* the controls (fields, menus, chips, buttons) are softer than the rest: a small radius, a drawn arrow for the menus */
    --radius-ctl: 8px;
    --chevron: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23111215%27 stroke-width=%272.4%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27m6 9 6 6 6-6%27/%3E%3C/svg%3E");
    --gap: 1.25rem;
    --maxw: 1160px;

    --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Oswald", "Bahnschrift", "Arial Narrow", system-ui, sans-serif;
    --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
    --display-weight: 700;
    --display-transform: uppercase;

    --logo-on-dark: none;
    --logo-on-light: block;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg: #0c0d10;
        --bg-elev: #15171c;
        --bg-elev-2: #1c1f26;
        --line: #292d36;
        --line-strong: #434958;
        --text: #eceef2;
        --text-strong: #ffffff;
        --muted: #99a1ae;
        --ink: #eceef2;
        --ink-ink: #0c0d10;
        --accent: #e5242b;
        --accent-hover: #f03a41;
        --accent-soft: rgba(229, 36, 43, .14);
        --gold: #f4b942;
        --silver: #c3c8d2;
        --bronze: #d38a55;
        --ok: #35c58a;
        --warn: #f2b441;
        --err: #ff6b6b;
        --info: #6aa8ff;
        --header-bg: #14161b;
        --btn-hover: #eceef2;
        --row-hover: rgba(255, 255, 255, .04);
        --shadow: 0 10px 30px rgba(0, 0, 0, .45);
        --chevron: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23eceef2%27 stroke-width=%272.4%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27m6 9 6 6 6-6%27/%3E%3C/svg%3E");
        --bar-bg: #000000;
        --bar-line: #23262e;
        --logo-on-dark: block;
        --logo-on-light: none;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0c0d10;
    --bg-elev: #15171c;
    --bg-elev-2: #1c1f26;
    --line: #292d36;
    --line-strong: #434958;
    --text: #eceef2;
    --text-strong: #ffffff;
    --muted: #99a1ae;
    --ink: #eceef2;
    --ink-ink: #0c0d10;
    --accent: #e5242b;
    --accent-hover: #f03a41;
    --accent-soft: rgba(229, 36, 43, .14);
    --gold: #f4b942;
    --silver: #c3c8d2;
    --bronze: #d38a55;
    --ok: #35c58a;
    --warn: #f2b441;
    --err: #ff6b6b;
    --info: #6aa8ff;
    --header-bg: #14161b;
    --btn-hover: #eceef2;
    --row-hover: rgba(255, 255, 255, .04);
    --shadow: 0 10px 30px rgba(0, 0, 0, .45);
    --chevron: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23eceef2%27 stroke-width=%272.4%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27m6 9 6 6 6-6%27/%3E%3C/svg%3E");
    --bar-bg: #000000;
    --bar-line: #23262e;
    --logo-on-dark: block;
    --logo-on-light: none;
}