/* 123factuur brand tokens. The only place where colours and typefaces are defined. */

@font-face {
    font-family: "Bricolage Grotesque";
    src: url("../fonts/bricolage-grotesque.woff2") format("woff2");
    font-weight: 200 800;
    font-display: swap;
}

@font-face {
    font-family: "Atkinson Hyperlegible Next";
    src: url("../fonts/atkinson-hyperlegible-next.woff2") format("woff2");
    font-weight: 200 800;
    font-display: swap;
}

@font-face {
    font-family: "Atkinson Hyperlegible Next";
    src: url("../fonts/atkinson-hyperlegible-next-italic.woff2") format("woff2");
    font-weight: 200 800;
    font-style: italic;
    font-display: swap;
}

:root {
    --ink: #1b2a6b;
    --ink-deep: #121c4a;
    --sky: #6f83e8;
    --sun: #ffc83d;
    --paid: #1b7f53;
    --alert: #b3261e;

    --page: #ffffff;
    --mist: #eef1fa;
    --surface: #ffffff;
    --line: #c9d0ea;
    --text: #141a33;
    --text-soft: #4a5275;
    --brand: var(--ink);
    --on-brand: #ffffff;
    --focus: #1b2a6b;

    --font-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
    --font-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", Verdana, system-ui, sans-serif;

    --radius-control: 10px;
    --radius-sheet: 18px;
    --wrap: 72rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --page: #0e1433;
        --mist: #151c45;
        --surface: #1a2250;
        --line: #3a447a;
        --text: #eef0fb;
        --text-soft: #b9c0e2;
        --brand: #ffc83d;
        --on-brand: #121c4a;
        --focus: #ffc83d;
    }
}