/* D2 dark alternate — loaded after site.css.
   Charcoal and black grounds, official logo yellow #FBC140 for actions and accents, off-white
   text. Illustrations and the quote form sit on restrained light panels so artwork and inputs
   stay readable. Light panels re-scope the colour tokens back to the light values, so every
   component inside them keeps its tested light-theme contrast.

   Token contrast (WCAG ratio; recomputed in qa/run_qa.py and listed in qa/QA-REPORT.md):
     text #F3F0EA on page #161414 ........ 16.1   on surface #221F20 .... 14.4
     muted #C9C4BC on page / surface ..... 10.6 / 9.4
     yellow #FBC140 on page / surface .... 11.2 / 10.0  (accent text: links, call link, feature heading)
     dark #231F20 on yellow #FBC140 ...... 9.9  (button and label text)
     focus ring: yellow on dark grounds (10.0 to 11.2); blue #1756C7 inside light panels (5.8)
*/

:root {
  color-scheme: dark;
  --stock: #161414;      /* page ground: near-black charcoal */
  --sheet: #221F20;      /* raised surface: logo dark */
  --ink: #F3F0EA;        /* primary text, rules and marks on dark */
  --graphite: #C9C4BC;   /* secondary text */
  --rule: #3B3637;       /* hairlines */
  --spot: #FBC140;       /* D2 logo yellow */
  --spot-deep: #F3F0EA;
  --spot-wash: #2B2618;  /* dark yellow-tinted notice ground */
  --on-spot: #231F20;    /* text on yellow */
  --panel: #F4F1EB;      /* restrained light panel for imagery and forms */
  --focus: #FBC140;
}

/* Light panels: re-scope tokens to the light theme */
.hero__art, .feature__art, .qform {
  color-scheme: light;
  --stock: #F0F0EE; --sheet: #FFFFFF; --ink: #231F20; --graphite: #4A4A4A; --rule: #CFCFCB;
  --spot-wash: #FEF3D9; --focus: #1756C7;
  color: var(--ink);
}

body { background: var(--stock); color: var(--ink); }
a:hover { color: var(--spot); }
::selection { background: var(--spot); color: var(--on-spot); }

.skip { background: var(--spot); color: var(--on-spot); }
.skip:focus { color: var(--on-spot); }
.stagebar { background: #000; color: #E6E2DA; border-bottom: 1px solid var(--rule); }

/* buttons */
.btn--spot { background: var(--spot); border-color: var(--spot); color: var(--on-spot); box-shadow: 4px 4px 0 #000; }
.btn--spot:hover { background: var(--ink); border-color: var(--ink); color: var(--on-spot); }
.btn--line { color: var(--ink); border-color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--on-spot); }
.qform .btn--spot { box-shadow: none; }

/* masthead */
.masthead { background: rgba(22, 20, 20, .97); border-bottom-color: var(--rule); }
.masthead .brand__logo { height: 58px; }
.nav__top, .navtoggle { color: var(--ink); }
.navtoggle { border-color: var(--ink); }
.nav__call { color: var(--spot); }
.nav__call:hover { color: var(--ink); }
.nav__sub:hover { background: #2C2829; }
.nav .tag { color: var(--graphite); }
@media (min-width: 1321px) {
  .nav__menu { background: var(--sheet); border-color: var(--rule); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
}
@media (max-width: 1320px) {
  .callchip { background: var(--spot); border-color: var(--spot); color: var(--on-spot); }
  .callchip:hover { background: var(--ink); border-color: var(--ink); color: var(--on-spot); }
  .masthead .brand__logo { height: 50px; }
}
@media (max-width: 440px) { .masthead .brand__logo { height: 46px; } }

/* hero: charcoal sheet with a light image panel */
.hero__sheet { background: var(--sheet); }
.hero h1 { color: #FFFFFF; }
.hero__intro { color: var(--graphite); }
.hero__art { background: var(--panel); padding: clamp(14px, 2.4vw, 28px); }
.hero__art img { margin-inline: auto; }
.crop::before, .crop::after { background: #6E6768; }

/* review notes (staging only) */
.review ul, .review__title { color: var(--ink); border-left-color: var(--spot); }

/* content */
.row h2, .dir h2, .faq h2, .related h2, .ctaband h2 { color: #FFFFFF; }
.row:first-child, .dir__list, .quote__guide section:first-of-type, .feature + .row { border-top-color: var(--ink); }
.dir__group { color: var(--on-spot); }
.dir__list a:hover { background: var(--sheet); box-shadow: inset 6px 0 0 var(--spot); }
.dir__line { color: var(--graphite); }
.related a { color: var(--spot); }
.related a:hover { color: var(--ink); }

/* homepage sports feature: raised charcoal with a yellow rule, art on a light panel */
.feature { background: var(--sheet); color: var(--graphite); box-shadow: none; border-left: 6px solid var(--spot); }
.feature h2 { color: var(--spot); }
.feature__art img { background: transparent; }
.feature__art { background: var(--panel); padding: 16px; }
.btn--light { background: var(--spot); border-color: var(--spot); color: var(--on-spot); }
.btn--light:hover { background: var(--ink); border-color: var(--ink); color: var(--on-spot); }
.feature :focus-visible { outline-color: var(--spot); }

/* FAQ */
.faq__item { background: var(--sheet); border-color: var(--rule); }
.faq__item summary { color: #FFFFFF; }
.faq__item summary::after { color: var(--on-spot); }
.faq__a { color: var(--graphite); }

/* closing CTA band */
.ctaband__sheet { background: var(--sheet); border-top: 4px solid var(--spot); }
.ctaband p { color: var(--graphite); }
.ctaband a:not(.btn) { color: var(--spot); }

/* quote page: guidance on dark, form on a light panel */
.qform { background: var(--panel); border: 0; }
.qform .field input, .qform .field select, .qform .field textarea { background: #FFFFFF; }
.qform__review, .linkbtn { color: var(--ink); }
.quote__guide p { color: var(--graphite); }

/* portfolio slots (staging only) */
.ph__frame { background: repeating-linear-gradient(-45deg, #221F20 0 12px, #1B1819 12px 24px); border-color: #6E6768; }
.ph__note { color: var(--graphite); }

/* footer: deepest ground */
.foot { background: #0E0C0C; border-top: 1px solid var(--rule); }
.foot__base { border-top-color: var(--rule); }

/* 404 */
.notfound h1 { color: #FFFFFF; }
.notfound__links a { color: var(--spot); }

/* ---- r2: premium refinements ------------------------------------------------
   Rendered studio mockups replace the outlined drawings; the mockups carry their
   own light studio backdrop, so the image panel needs no extra padding. Playful
   print-shop devices (color bar, offset button shadows) are removed. */
.colorbar { display: none; }
.btn--spot, .btn--spot:active { box-shadow: none; transform: none; }
.btn { letter-spacing: .005em; }
.hero__art, .feature__art { background: transparent; padding: 0; }
.hero__art img, .feature__art img { width: 100%; max-width: 600px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }
.hero__sheet { padding-block: clamp(32px, 5vw, 64px); }
.crop::before, .crop::after { background: #4E4849; }
@media (max-width: 860px) { .hero__art img { max-width: 100%; } }
@media (prefers-reduced-motion: no-preference) {
  .hero__art img { animation: settle .9s cubic-bezier(.2, .7, .2, 1) both .05s; }
  @keyframes settle { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

/* ---- r3: black-set product photography look ------------------------------------
   The mockups now sit on a black studio set with their own spotlight and vignette,
   so the frame is a hairline instead of a drop shadow. */
.hero__art img, .feature__art img { box-shadow: none; outline: 1px solid rgba(255, 255, 255, .07); outline-offset: -1px; }

/* Authentic wide header artwork: retain source colors on a light backing. */
.masthead .brand { padding: 6px 8px; background: #F9F8F3; border-radius: 2px; }
.masthead .brand__logo { width: 200px; height: auto; }
@media (max-width: 560px) {
  .masthead__inner { gap: 8px; }
  .masthead .brand { padding: 5px 6px; }
  .masthead .brand__logo { width: clamp(116px, 34vw, 160px); height: auto; }
  .masthead .callchip { padding-inline: 10px; }
  .masthead .navtoggle { padding-inline: 10px; }
}

/* Authentic wide header artwork: retain source colors on a light backing. */
.masthead .brand { padding: 6px 8px; background: #F9F8F3; border-radius: 2px; }
.masthead .brand__logo { width: 200px; height: auto; }
@media (max-width: 560px) {
  .masthead__inner { gap: 8px; }
  .masthead .brand { padding: 5px 6px; }
  .masthead .brand__logo { width: clamp(116px, 34vw, 160px); height: auto; }
  .masthead .callchip { padding-inline: 10px; }
  .masthead .navtoggle { padding-inline: 10px; }
}

/* Authentic white vector export; no opaque header panel. */
.masthead .brand { background: transparent; padding: 0; border-radius: 0; }