/* ==========================================================================
   Bright View Energy — shared brand tokens (2026 Style Guide)
   Every mockup imports this file. Colors and logo sizing come ONLY from here.
   Fonts are set per mockup in its own styles.css.
   ========================================================================== */

:root {
  /* ---- Palette (hex) ---- */
  --bve-dark-teal:     #103D40; /* primary text, dark sections, footer */
  --bve-stormy-teal:   #185A5F; /* section headers, primary buttons, links */
  --bve-dark-cyan:     #578C8A; /* subheaders, captions */
  --bve-misted-teal:   #74A7A2; /* secondary accents, L3 lists */
  --bve-soft-white:    #E7F3F3; /* cool section backgrounds */
  --bve-porcelain:     #F4F5F5; /* neutral section backgrounds */
  --bve-white:         #FFFFFF; /* base background, button text */
  --bve-amber-glow:    #F2A752; /* sun accent, highlights, stats */
  --bve-coral-glow:    #F98858; /* CTA option, emphasis */
  --bve-light-caramel: #F6BF91; /* warm secondary accent */
  --bve-powder-blush:  #FEB79F; /* soft warm accent */
  --bve-seashell:      #FDF5ED; /* warm section backgrounds */

  /* ---- Same palette as space-separated RGB channels, for transparency:
         background: rgb(var(--bve-dark-teal-rgb) / 0.6);            ---- */
  --bve-dark-teal-rgb:     16 61 64;
  --bve-stormy-teal-rgb:   24 90 95;
  --bve-dark-cyan-rgb:     87 140 138;
  --bve-misted-teal-rgb:   116 167 162;
  --bve-soft-white-rgb:    231 243 243;
  --bve-porcelain-rgb:     244 245 245;
  --bve-white-rgb:         255 255 255;
  --bve-amber-glow-rgb:    242 167 82;
  --bve-coral-glow-rgb:    249 136 88;
  --bve-light-caramel-rgb: 246 191 145;
  --bve-powder-blush-rgb:  254 183 159;
  --bve-seashell-rgb:      253 245 237;

  /* ---- Brand gradient (echoes the logo sunburst) ---- */
  --bve-glow-gradient: linear-gradient(135deg, var(--bve-amber-glow), var(--bve-coral-glow));

  /* ---- Semantic roles (style-guide defaults; mockups may remap) ---- */
  --bve-text:        var(--bve-dark-teal);
  --bve-heading:     var(--bve-dark-teal);
  --bve-section-head:var(--bve-stormy-teal);
  --bve-subhead:     var(--bve-dark-cyan);
  --bve-link:        var(--bve-stormy-teal);
  --bve-caption:     var(--bve-dark-cyan);
  --bve-focus:       var(--bve-coral-glow);

  /* ---- Logo sizing (style guide: header 40–56px desktop, 32–40px mobile) ---- */
  --bve-logo-h-desktop: 48px;
  --bve-logo-h-mobile:  36px;
  --bve-logo-h-min:     32px;  /* below this, switch to the mark alone */
  --bve-logo-stacked-h: 160px;
  --bve-mark-size:      40px;
  /* Clear space ≈ height of the ENERGY line ≈ 18% of horizontal logo height */
  --bve-logo-clear: calc(var(--bve-logo-h-desktop) * 0.18);
}

/* ---- Logo helpers ---- */
.bve-logo { display: block; height: var(--bve-logo-h-desktop); width: auto; margin: var(--bve-logo-clear); max-width: none; }
.bve-logo--stacked { height: var(--bve-logo-stacked-h); }
.bve-mark { display: block; height: var(--bve-mark-size); width: var(--bve-mark-size); }
@media (max-width: 767px) {
  .bve-logo { height: var(--bve-logo-h-mobile); margin: calc(var(--bve-logo-h-mobile) * 0.18); }
  .bve-logo--stacked { height: calc(var(--bve-logo-stacked-h) * 0.7); }
}

/* ---- Base buttons (style guide: Montserrat Bold 14px) ---- */
.bve-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: "Montserrat", system-ui, sans-serif; font-weight: 700; font-size: 1rem;
  line-height: 1.2; padding: .9em 1.6em; border: 2px solid transparent;
  text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s;
}
.bve-btn--primary   { background: var(--bve-stormy-teal); color: var(--bve-white); border-color: var(--bve-stormy-teal); }
.bve-btn--primary:hover { background: var(--bve-dark-teal); border-color: var(--bve-dark-teal); }
.bve-btn--warm      { background: var(--bve-amber-glow); color: var(--bve-dark-teal); border-color: var(--bve-amber-glow); }
.bve-btn--warm:hover { background: var(--bve-light-caramel); border-color: var(--bve-light-caramel); }
.bve-btn--outline   { background: transparent; color: var(--bve-stormy-teal); border-color: var(--bve-stormy-teal); }
.bve-btn--outline:hover { background: var(--bve-stormy-teal); color: var(--bve-white); }
.bve-btn--outline-light { background: transparent; color: var(--bve-white); border-color: var(--bve-white); }
.bve-btn--outline-light:hover { background: var(--bve-white); color: var(--bve-dark-teal); }

/* ---- Accessibility helpers ---- */
:focus-visible { outline: 3px solid var(--bve-focus); outline-offset: 3px; }
.bve-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.bve-skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; padding: .75em 1em;
  background: var(--bve-dark-teal); color: var(--bve-white); }
.bve-skip-link:focus { left: 1rem; top: 1rem; }

/* ---- Placeholder marker: visible but unobtrusive ---- */
.bve-placeholder { background: rgb(var(--bve-amber-glow-rgb) / .25); color: inherit; padding: 0 .25em; border-radius: 2px; font-style: normal; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important; }
}