/* 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: #071a33;
    --ambex-dim: #34455f;
    --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;
}

/*
    Filament's own grey explanations (helper texts, descriptions of sections, windows and empty lists)
    in the colour of ours: their light colour comes from --gray-500 / --gray-600, set here on them only
    (in the dark they use --gray-400, so nothing changes there).
*/
.fi-panel-app :is(
    .fi-sc-text, .fi-section-header-description, .fi-modal-description, .fi-empty-state-description,
    .fi-ta-empty-state-description, .fi-callout-description, .fi-ta-header-description, .fi-ta-group-description,
    .fi-ta-text-description, .fi-fo-checkbox-list-option-description, .fi-fo-radio-label-description,
    .fi-sc-wizard-header-step-description, .fi-wi-stats-overview-stat-description,
    .fi-in-text-item.fi-color-gray, .fi-ta-text-item.fi-color-gray
) {
    --gray-500: var(--ambex-dim);
    --gray-600: var(--ambex-dim);
}

/* 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.
*/