/* The brand's colours and fonts, used by every page as var(--ambex-…), and what each colour means. */

.fi-panel-app {
    --ambex-navy: #071a33;
    --ambex-blue: #1f75de;
    --ambex-sky: #5aa5ff;
    --ambex-bg: #f3f8fd;
    --ambex-rule: #d3e2f0;
    --ambex-rule-strong: #b3cff2;
    --ambex-tint: #eaf3fd;
    --ambex-text: #34455f;
    --ambex-dim: #52647e;
    --ambex-head: 'Space Grotesk', 'Inter', ui-sans-serif, system-ui, sans-serif;
    --ambex-hero:
        radial-gradient(ellipse 45% 60% at 88% 18%, rgba(90, 165, 255, 0.2), transparent 70%),
        radial-gradient(ellipse 45% 70% at 4% 100%, rgba(79, 110, 230, 0.2), transparent 70%),
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 56px 56px,
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 56px 56px,
        linear-gradient(125deg, #123a58 0%, #17232d 55%, #232a4d 100%);

    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

/* Labels and explanations stay readable on the dark page. */
.dark .fi-panel-app {
    --ambex-dim: #9fb3cc;
}

/*
    Colour roles across the portal, so each colour means one thing:
    navy for the main action, "you are here" and headings (also the menu's section names),
    blue only for what can be clicked (and the help line), blue-grey for labels and explanations.
*/