/*
 * Trezo Lens design tokens.
 *
 * Loaded before site.css and before nothing else depends on it. Every token has a value in BOTH
 * colour modes, so a component never has to ask which mode it is in.
 *
 * The palette is anchored on the institutional navy #162048. Dark surfaces sit darker and less
 * saturated than the navy itself, which lets the navy appear as an element rather than only as a
 * background. The accent is an orange close to the institutional coral, which carries the family
 * resemblance to the parent brand.
 *
 * Every foreground-on-background pair a component actually renders was measured at or above 4.5:1
 * in both modes. The two accents differ between the modes on purpose, because one value cannot
 * clear that bar against both a near-black and a near-white surface.
 */

/*
 * Self-hosted, so no page makes a third-party request. Both families are SIL Open Font License;
 * the licences are versioned beside the files in web/fonts/.
 *
 * Inter ships as one variable file covering every weight, which is why a single @font-face
 * declares the whole 100 to 900 range. font-display: swap keeps text readable while it loads,
 * because the page that diagnoses other people's performance cannot block on its own.
 */
@font-face {
    font-family: "Inter";
    src: url("../fonts/InterVariable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "JetBrains Mono";
    src: url("../fonts/JetBrainsMono-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "JetBrains Mono";
    src: url("../fonts/JetBrainsMono-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/*
 * Bricolage Grotesque carries the display voice: headings and the wordmark, never body text. It is
 * a variable font spanning optical size and weight, so one file covers every heading on the site.
 *
 * Split into two subsets, latin and latin-ext, exactly as Google Fonts serves it. The split is not
 * cosmetic here: pt_BR copy reaches into latin-ext for some accented characters, and a browser
 * fetches the second file only when a page actually uses one.
 */
@font-face {
    font-family: "Bricolage Grotesque";
    src: url("../fonts/BricolageGrotesque-latin.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
    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: "Bricolage Grotesque";
    src: url("../fonts/BricolageGrotesque-latin-ext.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
    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;
}

/* Source Sans 3 is the body voice, replacing Inter. Same subset split, same reason. */
@font-face {
    font-family: "Source Sans 3";
    src: url("../fonts/SourceSans3-latin.woff2") format("woff2");
    font-weight: 200 900;
    font-style: normal;
    font-display: swap;
    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: "Source Sans 3";
    src: url("../fonts/SourceSans3-latin-ext.woff2") format("woff2");
    font-weight: 200 900;
    font-style: normal;
    font-display: swap;
    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;
}

:root {
    /* Brand anchors, identical in both modes. */
    --lens-navy: #162048;
    --lens-navy-deep: #0e1530;

    /*
     * Severity. Never used decoratively: a colour here means a state of the store.
     *
     * Each was measured against the raised surface rather than picked by eye. Amber is where a
     * dark theme usually fails AA, so warning is lifted well past the institutional tone instead
     * of being darkened the way it would be for a light surface.
     */
    --lens-critical: #ff7a75;
    --lens-warning: #eab308;
    --lens-ok: #4ade80;
    --lens-neutral: #94a3b8;

    /* Typography, with the system stack behind each family for the moment before it loads. */
    --lens-font-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
    --lens-font-ui: "Source Sans 3", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --lens-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Consolas", monospace;

    /* Spacing, in steps of 4px. */
    --lens-space-1: 0.25rem;
    --lens-space-2: 0.5rem;
    --lens-space-3: 0.75rem;
    --lens-space-4: 1rem;
    --lens-space-5: 1.5rem;
    --lens-space-6: 2rem;
    --lens-space-7: 3rem;
    --lens-space-8: 4rem;

    --lens-radius: 0.375rem;
    --lens-radius-lg: 0.75rem;
    --lens-border-width: 1px;

    /* The approved reference palette: ink, petrol, mist, paper, amber, coating. */
    --lens-surface: #10151d;
    --lens-surface-raised: #1b2432;
    --lens-surface-sunken: #0b0f15;
    --lens-border: #2c3a4f;
    --lens-border-strong: #3f5069;
    --lens-text: #e8edf4;
    --lens-text-muted: #8fa1b8;
    --lens-accent: #e8a33d;
    --lens-accent-contrast: #10151d;
    --lens-accent-soft: rgba(232, 163, 61, 0.14);
    --lens-confirm: #57c79a;
    --lens-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/*
 * Bootstrap reads these, so its components inherit the theme instead of being overridden one rule
 * at a time. Anything Bootstrap draws without our help still lands on the Lens palette.
 */
:root {
    --bs-body-bg: var(--lens-surface);
    --bs-body-color: var(--lens-text);
    --bs-body-font-family: var(--lens-font-ui);
    --bs-border-color: var(--lens-border);
    --bs-border-radius: var(--lens-radius);
    --bs-secondary-color: var(--lens-text-muted);
    --bs-emphasis-color: var(--lens-text);
    --bs-tertiary-bg: var(--lens-surface-sunken);
    --bs-primary: var(--lens-accent);
    --bs-link-color: var(--lens-accent);
    --bs-link-hover-color: var(--lens-accent);
    --bs-code-color: var(--lens-accent);
}