/* B&H Well Drilling — style options.
   Loaded AFTER site.css, so everything here wins on cascade order.

   site.css is written against custom properties, so a theme is mostly a matter
   of redefining those same names. Anything site.css hardcodes on a dark surface
   is re-pointed at a variable in the shared block at the bottom.

   Themes:
     bluesteel   graphite + the azure from their logo (default)
     fieldgreen  the hunter green of their rigs, condensed caps
     heritage    cream + slate + brand red, Fraunces serif, title case
     daylight    light, airy, wide-open, soft corners

   The --scrim-* stops are written out per theme as plain rgba. Don't reach for
   color-mix() here: if it isn't supported the whole declaration is dropped.
*/

@font-face{font-family:'Fraunces';src:url('/assets/fonts/Fraunces-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('/assets/fonts/Fraunces-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* Fallbacks, in case a page ever renders without a data-theme attribute. */
:root{
  --scrim-1:rgba(14,22,29,.94);
  --scrim-2:rgba(14,22,29,.85);
  --star:#F0A81E;
}

/* --- 1. BLUE STEEL — graphite + logo azure (default) --------------------- */
/* site.css already carries these values; the block exists so the switcher has
   something to switch back to. */
[data-theme="bluesteel"]{
  --scrim-1:rgba(14,22,29,.94);
  --scrim-2:rgba(14,22,29,.85);
  --star:#F0A81E;
}

/* --- 2. FIELD GREEN — the colour their rigs are painted ------------------ */
[data-theme="fieldgreen"]{
  --dark-900:#0F241D;
  --dark-800:#16302A;
  --dark-700:#214238;
  --dark-600:#356052;

  --azure:#0E7C63;
  --azure-600:#119B7C;
  --azure-700:#0A5F4C;
  --azure-300:#6FD8BC;
  --accent:#C8651C;
  --accent-700:#A54F12;
  --on-accent:#FFFFFF;

  --ink:#15241F;
  --body:#41544D;
  --muted:#6B7F78;
  --line:#DCE5E1;
  --line-soft:#EBF1EE;
  --mist:#F3F7F5;
  --mist-2:#E4EDE9;

  --on-dark:#D6E5DE;
  --on-dark-2:#AAC4BA;
  --on-dark-3:#7F9A90;
  --scrim-1:rgba(15,36,29,.94);
  --scrim-2:rgba(15,36,29,.85);
  --star:#E0A32A;

  --display:'Barlow Condensed','Arial Narrow',system-ui,sans-serif;
  --display-case:uppercase;
  --display-track:.012em;
}
/* Condensed caps sit tighter than Inter does. */
[data-theme="fieldgreen"] h1,
[data-theme="fieldgreen"] h2,
[data-theme="fieldgreen"] h3{line-height:1.04}
[data-theme="fieldgreen"] .faq summary,
[data-theme="fieldgreen"] .stat__num,
[data-theme="fieldgreen"] .bigphone,
[data-theme="fieldgreen"] .footer__phone a{text-transform:uppercase;letter-spacing:.012em}

/* --- 3. HERITAGE — family business since 1953 ---------------------------- */
[data-theme="heritage"]{
  --dark-900:#1D2A36;
  --dark-800:#263340;
  --dark-700:#354553;
  --dark-600:#4B5D6C;

  --azure:#2E6F9E;
  --azure-600:#3A83B6;
  --azure-700:#245B83;
  --azure-300:#9CCBE6;
  --accent:#C21F26;
  --accent-700:#9C171D;
  --on-accent:#FFF6F0;

  --ink:#25201C;
  --body:#4F4740;
  --muted:#776D64;
  --line:#E3DBCD;
  --line-soft:#F0EAE0;
  --mist:#FBF7F0;
  --mist-2:#F2EADD;
  --paper:#FFFDF9;

  --on-dark:#E6E1D8;
  --on-dark-2:#C2BDB3;
  --on-dark-3:#95908A;
  --scrim-1:rgba(29,42,54,.94);
  --scrim-2:rgba(29,42,54,.85);
  --star:#C08A1E;

  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --display-case:none;
  --display-track:-.006em;
  --radius:8px;
  --radius-lg:14px;
}
[data-theme="heritage"] body{background:var(--paper)}
/* A serif makes a clumsy button; keep the UI in Inter. */
[data-theme="heritage"] .btn,
[data-theme="heritage"] .card__more{font-family:var(--sans);font-weight:700}
[data-theme="heritage"] .eyebrow{color:var(--accent)}

/* --- 4. DAYLIGHT — light, airy, modern ----------------------------------- */
[data-theme="daylight"]{
  --dark-900:#0B3550;
  --dark-800:#104A6C;
  --dark-700:#16608B;
  --dark-600:#2C7FAE;

  --azure:#0C8FD0;
  --azure-600:#17A6EC;
  --azure-700:#0A6E9F;
  --azure-300:#8BDCFF;
  --accent:#0C8FD0;
  --accent-700:#0A6E9F;
  --on-accent:#FFFFFF;

  --ink:#0C2233;
  --body:#3E5769;
  --muted:#6B8497;
  --line:#DCE8F0;
  --line-soft:#EEF5FA;
  --mist:#F5FAFD;
  --mist-2:#E3F0F8;

  --on-dark:#DCEEF8;
  --on-dark-2:#AFD2E8;
  --on-dark-3:#84AEC9;
  --scrim-1:rgba(11,53,80,.93);
  --scrim-2:rgba(11,53,80,.82);
  --star:#F0A81E;

  --radius:16px;
  --radius-lg:24px;
  --shadow:0 1px 2px rgba(12,34,51,.04), 0 14px 34px -16px rgba(12,34,51,.2);
  --shadow-lg:0 2px 6px rgba(12,34,51,.05), 0 36px 72px -28px rgba(12,34,51,.32);
}
[data-theme="daylight"] .btn{border-radius:999px}

/* --- Shared: re-point the few hardcoded values in site.css --------------- */
.figure__cap{background:linear-gradient(transparent,var(--scrim-2))}
.lightbox{background:var(--scrim-1)}
.quote__stars{color:var(--star)}

/* --- Dev-only preview switcher ------------------------------------------- */
/* Emitted only while DEV_THEME_SWITCHER is on in build.py. Not part of the
   finished site — see README, "Choosing a style". */
.themebar{background:#0E1116;color:#E7EAEE;font-family:var(--sans);
  border-bottom:1px solid rgba(255,255,255,.12)}
.themebar__inner{width:var(--shell);margin-inline:auto;display:flex;align-items:center;
  gap:1rem 1.25rem;padding-block:.6rem;flex-wrap:wrap}
.themebar__label{font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:#8C949F;flex-shrink:0}
.themebar__opts{display:flex;gap:.4rem;flex-wrap:wrap}
.themebar__btn{
  display:flex;flex-direction:column;gap:.1rem;text-align:left;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  color:#E7EAEE;border-radius:7px;padding:.42rem .75rem;font-family:inherit;
  transition:background .15s ease, border-color .15s ease;
}
.themebar__btn:hover{background:rgba(255,255,255,.13)}
.themebar__btn b{font-size:.84rem;font-weight:600;line-height:1.2}
.themebar__btn small{font-size:.66rem;color:#99A1AC;line-height:1.2}
.themebar__btn[aria-pressed="true"]{background:#2C6DF0;border-color:#5B8DF5;color:#fff}
.themebar__btn[aria-pressed="true"] small{color:#D3E0FC}
.themebar__note{font-size:.72rem;color:#767E89;margin-left:auto}
@media (max-width:760px){
  .themebar__note{display:none}
  .themebar__label{width:100%}
}
@media print{.themebar{display:none}}