/* =====================================================================
   BP 00 TOKENS
   Best Placed Kit v4.0

   Fluent Snippet:  BP 00 Tokens      Type: CSS, front end      Priority: 1

   WHAT CHANGED IN v4
   Every colour and font below now READS FROM ELEMENTOR.
   Change a colour in Site Settings > Global Colours and every token follows,
   so the coded pieces (megabar, rails) recolour with the rest of the site.
   You do not edit this file per client any more.

   The hex after each comma is only a fallback for the moment before the
   kit stylesheet loads. It is the kit default, not a client colour.

   Declared on body, not :root, on purpose. Elementor puts its globals on
   .elementor-kit-N, which is a class on <body>. A token on :root cannot
   see them and resolves to nothing.
===================================================================== */

body {
    /* ---- colour, from Site Settings > Global Colours ---- */
    --brand-primary:            var(--e-global-color-primary, #1D2327);        /* Headings */
    --brand-ink:                var(--e-global-color-text, #4F565C);           /* Body text */
    --brand-ink-muted:          var(--e-global-color-bpmuted, #666D73);        /* Muted text */
    --brand-accent-solid:       var(--e-global-color-accent, #2457D6);         /* Brand: buttons, links */
    --brand-accent-solid-hover: var(--e-global-color-bphover, #1B45B0);        /* Brand hover */
    --brand-accent-solid-ink:   var(--e-global-color-bponaccent, #FFFFFF);     /* Text on brand */
    --brand-decor:              var(--e-global-color-secondary, #1A9FB8);      /* Brand 2: rules, icons */
    --brand-accent:             var(--e-global-color-bpaccentdark, #6CC7DC);   /* Accent on dark */
    --brand-accent-ink:         var(--e-global-color-bpdark, #171C20);         /* Text on the dark accent */
    --brand-line:               var(--e-global-color-bpline, #DCE0E4);         /* Hairline */
    --brand-surface:            var(--e-global-color-bpsurface, #FFFFFF);      /* Surface */
    --brand-surface-alt:        var(--e-global-color-bpalt, #F3F5F7);          /* Surface alt */
    --brand-tint:               var(--e-global-color-bptint, #EDF3FE);         /* Surface tint */
    --brand-surface-dark:       var(--e-global-color-bpdark, #171C20);         /* Dark surface */

    /* ---- derived, never set by hand ---- */
    --brand-primary-light:      var(--brand-ink);
    --brand-primary-deep:       var(--brand-surface-dark);
    --brand-accent-hover:       color-mix(in srgb, var(--brand-accent) 82%, #fff);
    --brand-line-strong:        color-mix(in srgb, var(--brand-primary) 30%, var(--brand-surface));
    --brand-grey:               var(--brand-line-strong);
    --brand-surface-soft:       color-mix(in srgb, var(--brand-surface-alt) 45%, var(--brand-surface));
    --brand-gradient:           linear-gradient(135deg, var(--brand-decor) 0%, var(--brand-accent-solid) 100%);
    --brand-shadow:             0 10px 24px color-mix(in srgb, var(--brand-primary) 12%, transparent);

    /* ---- type, from Site Settings > Global Fonts ---- */
    --brand-font:               var(--e-global-typography-text-font-family, Arial), system-ui, -apple-system, "Segoe UI", sans-serif;
    --brand-font-heading:       var(--e-global-typography-primary-font-family, Arial), system-ui, -apple-system, "Segoe UI", sans-serif;
    --brand-weight-heading:     var(--e-global-typography-primary-font-weight, 600);
    --brand-weight-body:        var(--e-global-typography-text-font-weight, 400);

    /* ---- shape, used only by the coded pieces. Native sections set radius in the panel ---- */
    --brand-radius:             8px;
    --brand-radius-card:        14px;
    --brand-radius-pill:        999px;
    --brand-accent-bar-len:     46px;
    --bp-control-size:          46px;
}