/* ==========================================================================
   Micro Web Solution — Brand Palette (single source of truth)
   Derived from the company logo: royal blue (#343fc0) + red (#ff0005),
   blended with soft, light, attractive supporting colors.

   Load this FIRST, before any other stylesheet, so every page can use
   these variables (var(--blue), var(--red), etc.).
   ========================================================================== */

:root {
    /* ---- Brand (straight from the logo) -------------------------------- */
    --blue:        #343fc0;   /* primary — logo "W" + diamond              */
    --blue-dk:     #22287d;   /* hover / pressed — logo shadow blue        */
    --blue-soft:   #eef0fb;   /* light periwinkle wash (hover, sections)   */

    --red:         #b4383a;   /* action / CTA — logo "M"                   */
    --red-dk:      #9b0004;   /* CTA hover — logo shadow red               */
    --coral:       #ffe7e1;   /* soft red echo — badges, tags, highlights  */

    /* ---- Accent -------------------------------------------------------- */
    --gold:        #f5b133;   /* warm accent that complements red + blue   */
    --gold-dk:     #d9931a;

    /* ---- Neutrals (blue-tinted, so they blend) ------------------------- */
    --bg:          #fbfcff;   /* page background — cool white               */
    --surface:     #f5f7fc;   /* cards, dropdowns, panels                   */
    --surface-2:   #eef0fb;   /* alternate section background               */
    --border:      #e2e6f0;   /* dividers, outlines                         */
    --text:        #2b3157;   /* headings + body (blue-ink, not harsh black)*/
    --muted:       #687089;   /* secondary text                            */

    /* ---- Feedback ------------------------------------------------------ */
    --success:     #16c784;
    --warning:     #f5b133;
    --danger:      #ff0005;

    /* ---- Typography ---------------------------------------------------- */
    --font-head:   "Space Grotesk", "Segoe UI", system-ui, sans-serif;  /* headings */
    --font-body:   "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; /* body / UI */

    /* ---- Tokens -------------------------------------------------------- */
    --radius:      10px;
    --shadow:      0 8px 24px rgba(26, 31, 54, .10);
    --shadow-lg:   0 14px 40px rgba(26, 31, 54, .14);
    --header-h:    72px;
}