/* ============================================================================
   ACS DESIGN TOKENS
   ----------------------------------------------------------------------------
   The palette, radii and elevation, converted from the HSL custom properties in
   cs-addons-ui-react. Kept in its own file rather than inside
   admin-modern-shell.css because surfaces outside the admin shell need them too -
   the public landing page loads this and nothing else of the shell.

   cs-finance carries the same file. Keep the two in step.

   Purely additive: the only pre-existing value these ever changed is the default
   header navy, and a tenant's own colour is still injected into --acs-primary
   per request by Functions.GetHeaderColor.
   ============================================================================ */

:root {
    /* Brand */
    --acs-accent: #3377FF;
    --acs-accent-darker: #3567D4;
    --acs-accent-lighter: #99BBFF;
    --acs-accent-subtle: #E5EEFF;
    --acs-secondary: #F4712A;
    --acs-secondary-darker: #CB4B06;
    --acs-secondary-subtle: #FFF5F0;
    /* Surfaces and text */
    --acs-background: #FAFCFF;
    --acs-card: #FFFFFF;
    --acs-foreground: #020817;
    --acs-muted: #F1F5F9;
    --acs-muted-foreground: #64748B;
    --acs-accent-foreground: #0F172A;
    --acs-border: #E2E8F0;
    /* Semantic */
    --acs-success: #06C170;
    --acs-info: #0062F5;
    --acs-danger: #FF3D3D;
    --acs-warning: #FFAB00;
    /* Neutrals */
    --acs-dark-1: #39393C;
    --acs-dark-2: #6C7689;
    --acs-dark-3: #9192A6;
    --acs-dark-4: #C8CADA;
    --acs-light-1: #DDE5E9;
    --acs-light-2: #EBEBF0;
    --acs-light-3: #F1F1F4;
    --acs-light-4: #F9F9FB;
    /* Radii - --radius: 0.5rem in the React app */
    --acs-radius-sm: 4px;
    --acs-radius-md: 6px;
    --acs-radius-lg: 8px;
    /* Elevation - the grey-tinted scale the React app uses */
    --acs-shadow-card: rgba(145, 158, 171, 0.2) 0 0 2px 0, rgba(145, 158, 171, 0.12) 0 12px 24px -4px;
    --acs-shadow-z4: rgba(145, 158, 171, 0.16) 0 4px 8px 0;
    --acs-shadow-z8: rgba(145, 158, 171, 0.16) 0 8px 16px 0;
    --acs-shadow-z16: rgba(145, 158, 171, 0.16) 0 16px 32px -4px;
    --acs-shadow-z24: rgba(145, 158, 171, 0.16) 0 24px 48px 0;
}