/*
    The SYONEEX palette, applied to the whole app.

    Taken from the design tokens on qualteh.com/en/solutions/syoneex - not an approximation:

        --color-primary             #00325f   deep navy
        --color-primary-container   #084983   navy, what the site actually fills with
        --color-secondary/accent    #00d1ff   the cyan signature
        --color-foreground          #001c39   near-black navy
        --color-surface-*           #eff4ff / #dce9ff   pale blues

    Mapped below onto Syncfusion's own variables. This works because bootstrap5.3.css is token-driven -
    6810 --color-sf-* references, against 15 in the bootstrap5 build the app used before. On bootstrap5
    the same result needed dozens of !important overrides; here it is this file.

    Loaded from index.html AFTER the theme and BEFORE app.css, so it overrides the theme's defaults and
    can still be overridden by page-level rules.
*/

:root {
    /* ---------- brand ---------- */

    /*
        #084983 rather than #00325f for the interactive navy: #084983 is the one the site itself uses as a
        background fill, and #00325f is dark enough that everything filled with it reads as almost black.
        #00325f and #001c39 become the hover and pressed states instead.
    */
    --color-sf-primary: #084983;
    --color-sf-primary-text-color: #ffffff;
    --color-sf-primary-light: #d0e4ff;
    --color-sf-primary-lighter: #eff4ff;
    --color-sf-primary-dark: #00325f;
    --color-sf-primary-darker: #001c39;
    --color-sf-primary-bg-color-hover: #00325f;
    --color-sf-primary-bg-color-pressed: #001c39;
    --color-sf-primary-bg-color-selected: #00325f;

    /* ---------- surfaces ---------- */

    /*
        A four-step ramp in the site's blues where the theme has neutral greys. Components read these, so
        a grid header, a toolbar and a card all land on the right step without being named individually:

            alt1  #ffffff   cards, data rows
            alt2  #eff4ff   toolbars - what you can do
            alt3  #dce9ff   column headers - what the columns are
            ground #f4f8fb  the page behind the cards
    */
    --color-sf-content-bg-color: #f4f8fb;
    --color-sf-content-bg-color-alt1: #ffffff;
    --color-sf-content-bg-color-alt2: #eff4ff;
    --color-sf-content-bg-color-alt3: #dce9ff;
    --color-sf-content-bg-color-hover: #eff4ff;
    --color-sf-flyout-bg-color: #ffffff;

    /* ---------- lines and ink ---------- */

    /*
        The muted inks are not in the brand palette - a marketing page has no need for them. Derived by
        lightening #001c39, so they stay in the same hue rather than falling back to a neutral grey that
        would fight the blues.
    */
    --color-sf-border: #d7e4ee;
    --color-sf-border-light: #e2e8f0;
    --color-sf-content-text-color: #001c39;
    --color-sf-content-text-color-alt1: #33506b;
    --color-sf-content-text-color-alt2: #5b7590;
    --color-sf-content-text-color-disabled: #a8bccd;

    /*
        The cyan is reserved for one job: marking what is selected. It is the brightest thing in the
        palette, so spending it on structure would leave nothing to draw the eye with - and at #00d1ff it
        is far too light to carry text.
    */
    --rec-accent: #00d1ff;

    /*
        Warning and danger are deliberately NOT redefined. A status must not drift towards the brand, or
        "needs attention" stops reading as such.
    */
}

/*
    The typeface. app.css sets 'Helvetica Neue', Helvetica, Arial on html/body, which overrides whatever
    the Syncfusion theme asked for - so the whole app rendered in Arial no matter which theme was loaded.
    That is the single largest reason it read as generic rather than as a product.
*/
html,
body {
    font-family: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
}