/* Sublime's graphic profile (Figma "Sublime - Grafisk Profil"), copied from hub.sublime.se's Sublime.Brand project.
   Catch keeps its own copy rather than referencing the project; changes to the profile are ported here by hand.
   Only Brandon Grotesque Medium is served, from our own origin, so the fonts work under a strict CSP. */

@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/lato-latin-400-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/lato-latin-ext-400-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/lato-latin-700-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/lato-latin-ext-700-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Brandon Grotesque";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/brandon-grotesque-medium.otf") format("opentype");
}

:root {
    /* Primary */
    --sb-blue: #262e40;
    /* Not in the profile: a deeper and a lighter step of the primary, for dark surfaces and their hover states. */
    --sb-blue-deep: #1c2230;
    --sb-blue-raised: #313b52;

    /* Secondary, each in 100 / 50 / 25 */
    --sb-teal: #60a2ad;
    --sb-teal-50: #afd0d6;
    --sb-teal-25: #d7e8ea;
    --sb-green: #809b80;
    --sb-green-50: #bfcdbf;
    --sb-green-25: #dfe6df;
    --sb-pink: #dda39e;
    --sb-pink-50: #eed1ce;
    --sb-pink-25: #f6e8e7;
    --sb-yellow: #d9b96f;
    --sb-yellow-50: #ecdcb7;
    --sb-yellow-25: #f5eddb;

    /* Basic */
    --sb-black: #1c1c1c;
    --sb-grey-1: #72726e;
    --sb-grey-2: #969692;
    --sb-grey-3: #b5b4b0;
    --sb-grey-4: #e4e0d9;
    --sb-grey-5: #faf9f7;
    --sb-white: #ffffff;

    /* Status colours: the secondary hues darkened until text in them is readable on white and still distinct on blue. */
    --sb-status-ok: #5f8a63;
    --sb-status-warning: #b8913a;
    --sb-status-error: #c0605a;
    --sb-status-info: #4a8792;

    --sb-font-heading: "Brandon Grotesque", "Segoe UI", system-ui, sans-serif;
    --sb-font-body: "Lato", "Segoe UI", system-ui, sans-serif;
}

/* Type scale from the profile. The app pages mostly use h3–h5 sizes; the large ones are for login and landing pages. */
.sb-h1 { font: 500 60px/72px var(--sb-font-heading); }
.sb-h2 { font: 500 48px/56px var(--sb-font-heading); }
.sb-h3 { font: 500 32px/36px var(--sb-font-heading); }
.sb-h4 { font: 500 24px/32px var(--sb-font-heading); }
.sb-h5 { font: 700 18px/26px var(--sb-font-body); }
.sb-lead { font: 500 26px/32px var(--sb-font-heading); }