:root {
    /* Core surfaces */
    --page: #f4f6f8;
    --surface: #f8fafb;
    --surface-strong: #ffffff;
    --text: #17212b;
    --muted: #64717d;
    --muted-light: #8b959e;

    /* Borders and headers */
    --line: #d7dde2;
    --line-soft: #e8ecef;
    --header: #f1f4f6;
    --header-strong: #e6ebef;

    /* Navigation */
    --nav-background: #ffffff;
    --nav-hover: #edf3f6;
    --nav-active: #dfeef4;
    --nav-active-line: #397895;

    /* Competition states */
    --finals-row: #edf6f3;
    --relegation-row: #fbefef;
    --cutoff-line: #74818b;

    /* Data scale */
    --blue-1: #edf4f7;
    --blue-2: #d9e9ef;
    --blue-3: #bdd9e3;
    --blue-4: #91bdcd;
    --blue-5: #5c9ab1;
    --blue-6: #2f708a;
    --blue-text-dark: #143340;

    /* Semantic colours */
    --positive: #23704d;
    --negative: #a33e42;
    --neutral: #5f6972;
    --expected: #82909b;
    --actual: #2f708a;
}