/*
    QwikScore design tokens. Loaded before every other stylesheet in both layouts and the printable report.

    Use these instead of literal values. Each token holds a value the app already used, so swapping a
    literal for its token never changes how a page looks. Colours used only once or twice are still written
    as literals; fold them into a token (or add one) when the page is next reworked.
*/

/*
    Inter, self-hosted: the variable-weight files Google Fonts serves (SIL Open Font License:
    fonts/inter/OFL.txt). The latin file is preloaded in both layouts, so it arrives within the
    font-display: optional window and pages render in Inter (from Google it often missed the window and
    fell back to Segoe UI). latin-ext only downloads for characters outside the latin file.
*/

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 400 800;
    font-display: optional;
    src: url("../fonts/inter/inter-latin-ext-wght-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 400 800;
    font-display: optional;
    src: url("../fonts/inter/inter-latin-wght-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;
}

:root {
    /* Neutrals and surfaces */
    --color-white: #ffffff;
    --color-page: #f8fafc;              /* App background */
    --color-surface-tint: #f8fbff;      /* Lightly blue panels */
    --color-surface-muted: #f1f5f9;
    --color-fill: #f0f4f9;              /* Hover and inset fills */
    --color-fill-strong: #edf2f8;
    --color-fill-alt: #edf2f7;
    --color-divider: #e7edf5;
    --color-border: #dfe7f2;
    --color-border-strong: #cbd8ea;

    /* Text */
    --color-text: #101a33;
    --color-text-secondary: #263954;
    --color-text-tertiary: #46607f;
    --color-text-muted: #71809a;
    --color-text-slate: #64748b;
    --color-text-faint: #91a0b8;

    /* Brand */
    --color-navy: #051d3b;
    --color-navy-dark: #071a38;
    --color-brand: #1e88e5;
    --color-brand-strong: #0875f5;
    --color-brand-hover: #147ff0;
    --color-brand-dark: #1675c8;
    --color-brand-tint: #eaf4ff;

    /* Status and score bands: healthy ≥ 80, needs attention 50–79, risk < 50 */
    --color-success: #24b66d;
    --color-success-tint: #f0fbf5;      /* Success notices */
    --color-success-border: #bce8cf;
    --color-success-text: #137a45;
    --color-warning: #f5b83f;
    --color-danger: #f05263;
    --color-danger-strong: #d9394f;
    --color-danger-tint: #fff4f5;
    --color-danger-border: #ffc8d0;     /* Error notices */

    /* Radius */
    --radius-xs: 5px;
    --radius-sm: 6px;
    --radius-md: 7px;                   /* Default for inputs, buttons and cards */
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-pill: 999px;

    /* Shadows */
    --shadow-focus: 0 0 0 3px rgba(30, 136, 229, 0.12);
    --shadow-popover: 0 14px 32px rgba(15, 35, 64, 0.14);
    --shadow-dialog: 0 22px 54px rgba(15, 35, 64, 0.2);

    /* Font sizes */
    --font-size-2xs: 10px;
    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-md: 13px;               /* Body text in tables and forms */
    --font-size-lg: 14px;
    --font-size-xl: 15px;
    --font-size-2xl: 17px;
    --font-size-3xl: 18px;
    --font-size-4xl: 20px;
    --font-size-5xl: 24px;

    /* Spacing */
    --space-1: 4px;
    --space-2: 6px;
    --space-3: 8px;
    --space-4: 10px;
    --space-5: 12px;
    --space-6: 14px;
    --space-7: 16px;
    --space-8: 18px;
    --space-9: 20px;
    --space-10: 22px;
}

/*
    Breakpoints. CSS variables can't be used in media queries, so media queries write the values out.

        phone    ≤ 640px    @media (max-width: 640px)
        tablet   641–1024px @media (min-width: 641px) and (max-width: 1024px)
        desktop  ≥ 1025px   @media (min-width: 1025px)

    The phone and tablet limits are shared with scripts as QS.breakpoints (js/breakpoints.js) and with
    views as Breakpoints (Infrastructure/Breakpoints.cs); change those together with the media queries.
    The *-phone.css stylesheets load with media="@Breakpoints.PhoneMedia".

    Some pages still have extra layout steps inside the tablet and desktop ranges (680, 900, 1040, 1100,
    1180, 1240 and 1500px) where a grid needs fewer columns.
*/