:root {
    --at-font: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
    --at-w-regular: 400;
    --at-w-semibold: 600;
    --at-w-bold: 800;

    --at-fs-display: 44px;  --at-lh-display: 1.25;
    --at-fs-h1: 38px;       --at-lh-h1: 1.32;
    --at-fs-h2: 26px;       --at-lh-h2: 1.38;
    --at-fs-h3: 20px;       --at-lh-h3: 1.5;
    --at-fs-h4: 17px;       --at-lh-h4: 1.6;
    --at-fs-h5: 15px;       --at-lh-h5: 1.6;
    --at-fs-deck: 20px;     --at-lh-deck: 1.75;
    --at-fs-body-lg: 19px;  --at-lh-body-lg: 2;
    --at-fs-body: 15px;     --at-lh-body: 1.75;
    --at-fs-ui: 14px;       --at-lh-ui: 1.4;
    --at-fs-meta: 13px;     --at-lh-meta: 1.5;
    --at-fs-micro: 12px;    --at-lh-micro: 1.4;

    --at-fs-score-xl: 64px;
    --at-fs-score-lg: 44px;
    --at-fs-score-md: 20px;
    --at-fs-score-sm: 15px;
    --at-numerals: tabular-nums lining-nums;

    --at-space-0: 2px;
    --at-space-1: 4px;
    --at-space-2: 8px;
    --at-space-3: 12px;
    --at-space-4: 16px;
    --at-space-5: 20px;
    --at-space-6: 24px;
    --at-space-7: 32px;
    --at-space-8: 40px;
    --at-space-9: 48px;
    --at-space-10: 64px;
    --at-space-11: 80px;
    --at-section-gap: 56px;
    --at-card-pad: 16px;

    --at-r-xs: 4px;
    --at-r-sm: 8px;
    --at-r-md: 12px;
    --at-r-lg: 16px;
    --at-r-pill: 999px;

    --at-container: 1240px;
    --at-container-wide: 1320px;
    --at-measure: 680px;
    --at-gutter: 24px;
    --at-page-margin: 32px;
    --at-header-h: 64px;
    --at-nav-h: 46px;
    --at-sticky-top: 46px;
    --at-tap: 44px;

    --at-ease: cubic-bezier(.2, .7, .2, 1);
    --at-ease-out: cubic-bezier(.16, 1, .3, 1);
    --at-dur-1: 120ms;
    --at-dur-2: 200ms;
    --at-dur-3: 320ms;
    --at-dur-4: 900ms;

    --at-z-raised: 2;
    --at-z-sticky: 40;
    --at-z-header: 50;
    --at-z-dropdown: 60;
    --at-z-sheet: 80;
    --at-z-toast: 90;

    --at-card-yellow: #f5c518;
    --at-card-red: #e5383b;
    --at-team-home-fallback: #2f7cf6;
    --at-team-away-fallback: #f0a020;
}

@media (max-width: 1019px) {
    :root {
        --at-fs-display: 34px;
        --at-fs-h1: 32px;
        --at-fs-h2: 24px;
        --at-fs-deck: 18px;
        --at-fs-body-lg: 18px;
        --at-fs-score-xl: 56px;
        --at-gutter: 20px;
        --at-page-margin: 24px;
        --at-section-gap: 48px;
    }
}

@media (max-width: 767px) {
    :root {
        --at-fs-display: 26px;  --at-lh-display: 1.42;
        --at-fs-h1: 26px;       --at-lh-h1: 1.45;
        --at-fs-h2: 22px;
        --at-fs-h3: 18px;
        --at-fs-h4: 16px;       --at-lh-h4: 1.65;
        --at-fs-deck: 17px;
        --at-fs-body-lg: 17px;  --at-lh-body-lg: 1.95;
        --at-fs-score-xl: 44px;
        --at-gutter: 16px;
        --at-page-margin: 16px;
        --at-section-gap: 40px;
        --at-header-h: 56px;
        --at-nav-h: 44px;
        --at-sticky-top: 56px;
        --at-card-pad: 14px;
    }
}

:root,
html[data-theme="dark"] {
    color-scheme: dark;

    --at-bg: #060b15;
    --at-bg-wash: linear-gradient(180deg, #0a1426 0, #060b15 520px);
    --at-surface-1: #0b1424;
    --at-surface-2: #0f1b2f;
    --at-surface-3: #14223a;
    --at-inset: #08101e;
    --at-ink: #03070f;
    --at-ink-2: #0a1220;

    --at-line: rgba(148, 170, 200, .12);
    --at-line-strong: rgba(148, 170, 200, .22);
    --at-line-ink: rgba(255, 255, 255, .08);

    --at-text-1: #eef3fa;
    --at-text-2: #b6c3d4;
    --at-text-3: #8fa0b6;
    --at-text-4: #5d6e85;
    --at-text-on-ink: #eef3fa;
    --at-text-on-ink-2: #a7b4c6;
    --at-text-on-fill: #ffffff;

    --at-accent: #ff3131;
    --at-accent-text: #ff5252;
    --at-accent-fill: #d61f26;
    --at-accent-fill-hover: #bf1a20;
    --at-accent-soft: rgba(255, 49, 49, .12);
    --at-accent-line: rgba(255, 49, 49, .45);

    --at-live: #ff4d4d;
    --at-live-soft: rgba(255, 77, 77, .14);
    --at-success: #2fbf71;
    --at-success-fill: #16794a;
    --at-success-soft: rgba(47, 191, 113, .14);
    --at-warning: #f2b33d;
    --at-warning-soft: rgba(242, 179, 61, .14);
    --at-danger: #ff5c5c;
    --at-danger-fill: #c4262e;
    --at-info: #6aa8ff;
    --at-gold: #f2c230;

    --at-win: #16794a;
    --at-draw: #5b6b80;
    --at-loss: #c4262e;

    --at-focus: #6aa8ff;
    --at-focus-ring: 0 0 0 2px var(--at-bg), 0 0 0 4px var(--at-focus);

    --at-shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
    --at-shadow-2: 0 10px 28px -14px rgba(0, 0, 0, .75);
    --at-shadow-3: 0 24px 56px -18px rgba(0, 0, 0, .8);
    --at-card-border: 1px solid var(--at-line);

    --at-img-empty: #0f1b2f;
    --at-scrim-bottom: linear-gradient(180deg, rgba(3, 7, 15, 0) 0%, rgba(3, 7, 15, .25) 38%, rgba(3, 7, 15, .88) 100%);
    --at-scrim-side: linear-gradient(270deg, rgba(3, 7, 15, .92) 0%, rgba(3, 7, 15, .55) 45%, rgba(3, 7, 15, 0) 75%);
    --at-crest-halo: drop-shadow(0 0 1px rgba(255, 255, 255, .22));
    --at-logo-tile: #ffffff;

    --at-pitch-a: #134a32;
    --at-pitch-b: #155036;
    --at-pitch-line: rgba(255, 255, 255, .42);

    --at-skeleton: #101c30;
    --at-skeleton-shine: rgba(148, 170, 200, .08);
}

html[data-theme="light"],
html[data-visual-theme="light"],
body.light-mode {
    color-scheme: light;

    --at-bg: #f2f4f8;
    --at-bg-wash: linear-gradient(180deg, #e9eef5 0, #f2f4f8 420px);
    --at-surface-1: #ffffff;
    --at-surface-2: #f6f8fb;
    --at-surface-3: #ffffff;
    --at-inset: #edf1f6;
    --at-ink: #0a1220;
    --at-ink-2: #111c2e;

    --at-line: rgba(14, 28, 47, .10);
    --at-line-strong: rgba(14, 28, 47, .18);
    --at-line-ink: rgba(255, 255, 255, .09);

    --at-text-1: #0e1c2f;
    --at-text-2: #3a4b60;
    --at-text-3: #5a6a80;
    --at-text-4: #8794a6;
    --at-text-on-ink: #eef3fa;
    --at-text-on-ink-2: #a7b4c6;
    --at-text-on-fill: #ffffff;

    --at-accent: #ff3131;
    --at-accent-text: #d0121c;
    --at-accent-fill: #d61f26;
    --at-accent-fill-hover: #bf1a20;
    --at-accent-soft: rgba(214, 31, 38, .08);
    --at-accent-line: rgba(214, 31, 38, .35);

    --at-live: #c81e28;
    --at-live-soft: rgba(200, 30, 40, .09);
    --at-success: #13804a;
    --at-success-fill: #15803d;
    --at-success-soft: rgba(19, 128, 74, .10);
    --at-warning: #9a6200;
    --at-warning-soft: rgba(154, 98, 0, .10);
    --at-danger: #c4262e;
    --at-danger-fill: #c4262e;
    --at-info: #1f5fd6;
    --at-gold: #a77f00;

    --at-win: #15803d;
    --at-draw: #5b6b80;
    --at-loss: #c4262e;

    --at-focus: #1f5fd6;
    --at-focus-ring: 0 0 0 2px var(--at-surface-1), 0 0 0 4px var(--at-focus);

    --at-shadow-1: 0 1px 2px rgba(14, 28, 47, .06), 0 1px 1px rgba(14, 28, 47, .04);
    --at-shadow-2: 0 10px 24px -12px rgba(14, 28, 47, .18);
    --at-shadow-3: 0 24px 48px -16px rgba(14, 28, 47, .28);
    --at-card-border: 1px solid var(--at-line);

    --at-img-empty: #e3e8ef;
    --at-crest-halo: none;
    --at-logo-tile: #ffffff;

    --at-pitch-a: #2c7a4d;
    --at-pitch-b: #308353;
    --at-pitch-line: rgba(255, 255, 255, .6);

    --at-skeleton: #e6ebf2;
    --at-skeleton-shine: rgba(255, 255, 255, .7);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --at-dur-1: 0ms;
        --at-dur-2: 0ms;
        --at-dur-3: 0ms;
        --at-dur-4: 0ms;
    }
}

.match-page,
.matches-page {
    --fx-surface: var(--at-surface-1);
    --fx-surface-2: var(--at-surface-2);
    --fx-hover: var(--at-line);
    --fx-line: var(--at-line);
    --fx-line-strong: var(--at-line-strong);
    --fx-text: var(--at-text-1);
    --fx-text-2: var(--at-text-2);
    --fx-muted: var(--at-text-3);
    --fx-accent: var(--at-accent);
    --fx-live: var(--at-live);
    --fx-live-soft: var(--at-live-soft);
    --fx-star: var(--at-gold);
    --fx-score-bg: var(--at-inset);
    --fx-focus: var(--at-focus);
    --fx-win: var(--at-win);
    --fx-draw: var(--at-draw);
    --fx-loss: var(--at-loss);
    --fx-warning: var(--at-warning);
    --pitch-a: var(--at-pitch-a);
    --pitch-b: var(--at-pitch-b);
}