/* ==========================================================================
   Guardian Alarm - menu colors
   Every color in the menus comes from here.

   The four base colors are read from the site's Gutenberg palette
   (Appearance > Editor > Styles > Colors, or the theme's palette). Change
   those in WordPress and the menus follow. The values after the commas are
   only used if a palette color is missing.

   Everything else is calculated from the four base colors, so hovers,
   tints, lines and shadows stay in proportion on any palette.
   ========================================================================== */
:root {
  /* ---- Base colors (Gutenberg palette) ---- */
  --gmm-accent:  var(--wp--preset--color--palette-attention, #ffb81c); /* yellow: underline, buttons, active tab, icon circles */
  --gmm-text:    var(--wp--preset--color--palette-text, #2c2a29);      /* text and icons */
  --gmm-bg:      var(--wp--preset--color--palette-bg, #ffffff);        /* panels, cards, drawer */
  --gmm-surface: var(--wp--preset--color--palette-light, #f1f1f1);     /* gray tab column, boxes, search */

  /* Text and icons drawn on the accent color. Palette Text by default; the
     plugin switches this to Palette Text Alt when the accent is dark
     (it compares the contrast of both on the accent and uses the better one). */
  --gmm-on-accent: var(--gmm-text);

  /* ---- Calculated from the base colors ---- */
  --gmm-accent-hover: color-mix(in srgb, var(--gmm-accent) 94%, #000);              /* yellow buttons on hover */
  --gmm-accent-tint:  color-mix(in srgb, var(--gmm-accent) 15.5%, var(--gmm-bg));   /* pale circle behind icons */
  --gmm-accent-wash:  color-mix(in srgb, var(--gmm-accent) 5.7%, var(--gmm-bg));    /* card background on hover */
  --gmm-accent-mark:  color-mix(in srgb, var(--gmm-accent) 40%, var(--gmm-bg));     /* search match highlight */
  --gmm-accent-glow:  color-mix(in srgb, var(--gmm-accent) 30%, transparent);       /* search box focus ring */

  --gmm-text-soft:    color-mix(in srgb, var(--gmm-text) 74%, var(--gmm-bg));       /* secondary text, counts, chevrons */
  --gmm-text-faint:   color-mix(in srgb, var(--gmm-text) 56%, var(--gmm-bg));       /* search placeholder */

  --gmm-line:         color-mix(in srgb, var(--gmm-text) 12%, var(--gmm-bg));       /* borders and dividers */
  --gmm-line-strong:  color-mix(in srgb, var(--gmm-text) 18%, var(--gmm-bg));       /* search border, divider above the intro */
  --gmm-bg-hover:     color-mix(in srgb, var(--gmm-text) 2.5%, var(--gmm-bg));      /* rows and links when tapped */
  --gmm-surface-hover: color-mix(in srgb, var(--gmm-text) 5%, var(--gmm-surface));  /* gray tabs on hover */
  --gmm-count:        color-mix(in srgb, var(--gmm-text) 12%, var(--gmm-bg));       /* count pills */

  --gmm-shadow-strong: color-mix(in srgb, var(--gmm-text) 28%, transparent);        /* panel drop shadow */
  --gmm-shadow-soft:   color-mix(in srgb, var(--gmm-text) 6%, transparent);
  --gmm-shadow-card:   color-mix(in srgb, var(--gmm-text) 15%, transparent);
  --gmm-shadow-bar:    color-mix(in srgb, var(--gmm-text) 20%, transparent);        /* mobile call bar */
  --gmm-shadow-tab:    color-mix(in srgb, var(--gmm-text) 14%, transparent);        /* selected mobile switch */
}