/* =============================================================================
   GFL DESIGN TOKENS — single source of truth
   Extracted from guardian-facility-locator-public.css in 3.2.0 so the grid view
   can load tokens WITHOUT loading the map stylesheet. Both views depend on this
   file; it is declared once and neither copy can drift from the other.

   Each custom property reads an Elementor global with a literal fallback. Where
   Elementor is active its live value wins; the hex/font literal is inert and
   only applies on sites without Elementor (or before the kit CSS loads).
   ============================================================================= */

.guardian-facility-locator-container,
.facility-detail-modal,
.gfl-sheet-detail,
.gfl-grid,
.gfl-grid-empty-notice {
  /* CAREFUL: these names do not line up with Elementor's one-for-one.
     --gfl-accent is Elementor's *secondary*; --gfl-link and --gfl-hover are Elementor's
     *accent*. Read the var() on the right, not the name on the left. */
  --gfl-primary:   var(--e-global-color-primary,   #004A62);
  /* Every interactive hover — solid fills and outline buttons alike — lands on Elementor's
     accent. Previously a color-mix() shade of primary, which no global could reach. */
  --gfl-primary-hover: var(--e-global-color-accent, #00728B);
  --gfl-accent:    var(--e-global-color-secondary, #F2A11F);
  --gfl-link:      var(--e-global-color-accent,    #00728B);
  --gfl-text:      var(--e-global-color-text,      #474646);
  /* Link-styled buttons ("Clear All", "Done") sit in body colour and warm on hover. */
  --gfl-text-hover: var(--e-global-color-secondary, #F2A11F);
  --gfl-surface:   #FCFDFF;
  --gfl-surface-2: #F5F5F3;
  /* Light blue. Consumed 14 times by the map view (sidebar dividers, detail-panel and card
     borders, a gradient stop). The grid's card border wants a warm grey (#F2F1F0) instead —
     that is a grid-local literal in guardian-facility-locator-grid.css, NOT a change here.
     Retuning this token to suit one view silently restyles the other. */
  --gfl-border:    #D2E6ED;

  /* ---- Stacking -------------------------------------------------------------
     Everything that lives INSIDE the map — the sticky filter bar, its dropdowns,
     the detail panel, tooltips — has to stay BELOW the host site's fixed header,
     or it paints over the navbar as the page scrolls. Elementor headers commonly
     sit at z-index 99, so this whole scale is kept well under that.

     Full-screen overlays are deliberately NOT on this scale: the mobile sheets,
     the filter drawer and the toast are modal surfaces and should cover the
     navbar too. Their values stay in the 1000+ range on purpose.

     If a host theme's header sits lower than these and the map needs to be above
     it instead, raise these five together. --------------------------------- */
  --gfl-z-sidebar:   20;
  --gfl-z-filterbar: 30;
  --gfl-z-dropdown:  40;
  --gfl-z-panel:     45;
  --gfl-z-tooltip:   50;
  --gfl-muted:     #97999B;
  --gfl-font:      var(--e-global-typography-text-font-family,    "IBM Plex Sans", sans-serif);
  --gfl-heading:   var(--e-global-typography-primary-font-family, "DM Serif Text", serif);
  --gfl-radius:    0.375rem;
}