/* KVZ brand palette -- the single source of truth for colour on this site.
   Loaded first, before style.css and kvz.css, both of which now reference these
   variables instead of hex literals. To retune the brand, edit this file only.

   The brief is a four-colour scheme: red, white, black and grey. The two extra
   reds below are not new brand colours -- they are a darker and a lighter step of
   the same red. They exist because the template paints most of its furniture
   (buttons, the side menu, the loader, the play button, the service cards) with
   two-stop gradients. Collapsing those to one flat red would visibly flatten the
   design, so the ramp keeps them reading as gradients while staying in palette. */

:root {
   /* Brand */
   --kvz-red:        #e20000;
   --kvz-red-dark:   #a10000;  /* gradient depth, pressed + hover states */
   --kvz-red-light:  #ff2626;  /* gradient highlight */

   --kvz-white:      #ffffff;
   --kvz-black:      #000000;
   --kvz-gray:       #202020;  /* headings, dark sections, dark gradient stop */

   /* Neutral steps derived from --kvz-gray, for borders, muted copy and the light
      section backgrounds the template relies on. Deliberately neutral greys: the
      stock template used blue-tinted greys (#90a4ae, #607d8b) that fight red. */
   --kvz-gray-mid:   #6b6b6b;
   --kvz-gray-soft:  #a5a5a5;
   --kvz-gray-line:  #e2e2e2;
   --kvz-gray-bg:    #f6f6f6;

   /* Translucent overlays. The template used a dark navy (rgba(20,22,34,…));
      neutral black keeps the photography underneath colour-neutral. */
   --kvz-overlay:       rgba(0, 0, 0, .82);
   --kvz-overlay-soft:  rgba(0, 0, 0, .70);
   --kvz-red-glow:      rgba(226, 0, 0, .25);

   /* Tints, used only for Bootstrap's focus rings and "active/selected" fills --
      Bootstrap needs a light step of the accent and pure red is far too heavy for
      a 1px focus border or an accordion's open background. */
   --kvz-red-focus:      #ff8080;
   --kvz-red-tint:       #ffb3b3;
   --kvz-red-tint-light: #ffe0e0;

   /* Bootstrap 5 ships its own blue. Point its theme variables at the brand red so
      any Bootstrap component we render follows automatically. Bootstrap also
      hardcodes that blue in ~60 places rather than reading these variables; those
      literals were rewritten to reference the palette directly in bootstrap.min.css
      (see the note at the top of kvz.css). */
   --bs-primary:          #e20000;
   --bs-primary-rgb:      226, 0, 0;
   --bs-link-color:       #e20000;
   --bs-link-color-rgb:   226, 0, 0;
   --bs-link-hover-color: #a10000;
}