/* Color palette and usage map for peopleplumber/index.aspx
   Each variable below maps a color used in index.aspx with a short
   description of where it is applied. Import or link this file and
   reference variables in your main stylesheet.
*/

:root {
  /* Primary palette */
  --color-bg: #0A2E5C;            /* Deep navy - main page background base */
  --color-bg-end: #0B3A6A;        /* Deep navy (gradient end) - background gradient end */
  --color-accent: #4DB8FF;        /* Sky blue - accent headings ("every budget") */
  --color-tag: #3C6E91;           /* Steel blue - category/tag pills (Value/Premium) */
  --color-cta: #1E5DBA;           /* Royal blue - primary CTA (secondary small CTA uses this too) */
  --color-cta-hover: #164a90;     /* Darker CTA for hover state */
  --color-price: #2E7BCF;         /* Medium blue - price panel backgrounds */
  --color-icon: #00C8FF;          /* Aqua - warranty icons / checkmarks */
  --color-text: #FFFFFF;          /* White - primary text color on dark backgrounds */

  /* Transparent / overlay helpers used for card and control styling */
  --overlay-weak: rgba(255,255,255,0.02);   /* subtle inner card highlight */
  --overlay-strong: rgba(255,255,255,0.06); /* used for small tag/control backgrounds */
  --border-muted: rgba(255,255,255,0.04);   /* faint card border */
  --control-bg: rgba(255,255,255,0.06);     /* carousel control background */

  /* Focus / shadow helpers */
  --focus-ring: rgba(0,200,255,0.18);       /* focus outline for accessibility */
  --shadow-color: rgba(3,15,38,0.45);       /* card drop shadow color */

  /* Utility values (not strictly "colors" but used in styling) */
  --transparent: transparent;
}

/* Usage notes:
   - --color-bg and --color-bg-end: used together to build the page
     background gradient: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-end) 100%).
   - --color-accent: used for prominent headings and accents that should
     stand out against the navy background.
   - --color-tag: applied to small pill labels (e.g., "Budget Boiler").
   - --color-cta / --color-cta-hover: main action color for secondary
     CTAs and hover states; primary CTA uses white background with
     color var(--color-cta) for the text.
   - --color-price: background of the price panel "pill" inside cards.
   - --color-icon: bright accent for checkmarks and warranty icons.
   - overlay and border variables: used to create the semi-transparent
     card surfaces and subtle separations between card regions.

   Example (reference) usage in your stylesheet:
     .site-header { background: linear-gradient(180deg, var(--color-bg), var(--color-bg-end)); }
     .products-head h2 { color: var(--color-accent); }
     .product-item { background: linear-gradient(180deg, var(--overlay-weak), var(--transparent));
                    box-shadow: 0 6px 20px var(--shadow-color);
                    border: 1px solid var(--border-muted); }
     .rounded-lg { background-color: var(--overlay-strong); }
     .button.primary { background: #fff; color: var(--color-cta); }
     .button.secondary { background: var(--color-cta); color: var(--color-text); }
*/