/*
    Loopa Automate colour palette — single source of truth for the console, Client Admin area, and
    login/registration pages. Prefixed --loopa- to avoid clashing with Bootstrap's --bs-* /
    MudBlazor's --mud-*. MudBlazor's theme is C# (Shared/MainLayout.razor) and can't read these —
    mirror palette changes there too.
*/

:root {
    /* ---- Brand ------------------------------------------------------------------
       The purple family. --loopa-primary is the workhorse: buttons, links, active nav.
       --loopa-primary-dark backs the app bar and other dark surfaces; --loopa-primary-light
       is for hover/focus states and decoration, not for text (2.8:1 on white). */
    --loopa-primary: #835baf;
    --loopa-primary-dark: #291f3d;
    --loopa-primary-light: #bc7dff;

    /* Pink accent — draws the eye to one thing per screen: a primary CTA, a badge, a
       highlighted stat. Too light for white text (2.4:1); pair it with --loopa-primary-dark. */
    --loopa-accent: #fe7cb8;

    /* ---- Text and neutrals ------------------------------------------------------
       --loopa-text is body copy (12:1 on white). --loopa-text-muted is helper text, placeholders,
       disabled states and borders — darkened from the supplied #7e868c (3.7:1) to 4.8:1, clearing
       the 4.5:1 bar for small copy. */
    --loopa-text: #2f373d;
    --loopa-text-muted: #6b7378;

    /* ---- Surfaces ---------------------------------------------------------------
       --loopa-surface: cards, panels, dialogs, table rows.
       --loopa-background: the page behind those surfaces.
       --loopa-background-alt: a second, cooler tint for zebra striping or a nested panel
       that needs to separate from --loopa-background without a border. */
    --loopa-surface: #ffffff;
    --loopa-background: #f8fbfe;
    --loopa-background-alt: #f6fcff;

    /* A light grey card for surfaces that sit on a dark background, where white reads as harsh.
       Faintly purple so it belongs to the brand rather than looking like dirty white. Note it is
       too dark for --loopa-text-muted (3.9:1) — use --loopa-text for small copy on it. */
    --loopa-surface-muted: #e9e7ef;

    /* ---- Pairings ---------------------------------------------------------------
       Derived from the palette above, not new colours. Use these for text/icons sitting on
       a filled brand background so contrast stays right if a brand token is ever retuned. */
    --loopa-on-primary: #f8fbfe;
    --loopa-on-primary-dark: #f8fbfe;
    --loopa-on-accent: #291f3d;
}