/* DINOGOODS BUTTON SYSTEM V5 — cache-busted authoritative contrast layer, 2026-10-08 */
:root{
  --dg-btn-green:#033220;
  --dg-btn-white:#fff;
  --dg-btn-hover:#4C944F;
}

/* Base: never allow label/icon to inherit an unreadable color. */
.btn,
.btn>span,
.btn .arrow,
.btn .line-art-arrow,
.btn svg{color:inherit!important}
.btn svg,.btn .arrow,.btn .line-art-arrow{stroke:currentColor!important}

/* Green buttons: white text/icon + mandatory white stroke. */
.btn-solid,
.btn-header{
  background:var(--dg-btn-green)!important;
  border:1px solid var(--dg-btn-white)!important;
  color:var(--dg-btn-white)!important;
}
.btn-solid>span,.btn-header>span,
.btn-solid .arrow,.btn-header .arrow,
.btn-solid .line-art-arrow,.btn-header .line-art-arrow,
.btn-solid svg,.btn-header svg{
  color:var(--dg-btn-white)!important;
  stroke:currentColor!important;
}

/* White buttons: DINOGOODS green text/icon. */
.btn-light{
  background:var(--dg-btn-white)!important;
  border:1px solid var(--dg-btn-white)!important;
  color:var(--dg-btn-green)!important;
}
.btn-light>span,.btn-light .arrow,.btn-light .line-art-arrow,.btn-light svg{
  color:var(--dg-btn-green)!important;
  stroke:currentColor!important;
}

/* Transparent light-outline buttons on dark/photo surfaces. */
.btn-outline-light{
  background:transparent!important;
  border:1px solid var(--dg-btn-white)!important;
  color:var(--dg-btn-white)!important;
}
.btn-outline-light>span,.btn-outline-light .arrow,.btn-outline-light .line-art-arrow,.btn-outline-light svg{
  color:var(--dg-btn-white)!important;
  stroke:currentColor!important;
}

/* Explicit dark/photo/green surfaces: filled CTAs invert to white. */
:is(
 .hero,
 .feature,
 .cta-photo,
 .sourcing-final-cta,
 .sourcing-final-inner,
 .about-coffee,
 .about-cta,
 .seo-bottom-cta,
 .seo-conversion-box,
 .dark-section,
 .green-section,
 [data-theme="dark"],
 [data-surface="dark"],
 [data-surface="green"]
) :is(.btn-solid,.btn-header,.btn-light){
  background:var(--dg-btn-white)!important;
  border-color:var(--dg-btn-white)!important;
  color:var(--dg-btn-green)!important;
}
:is(
 .hero,
 .feature,
 .cta-photo,
 .sourcing-final-cta,
 .sourcing-final-inner,
 .about-coffee,
 .about-cta,
 .seo-bottom-cta,
 .seo-conversion-box,
 .dark-section,
 .green-section,
 [data-theme="dark"],
 [data-surface="dark"],
 [data-surface="green"]
) :is(.btn-solid,.btn-header,.btn-light) :is(span,.arrow,.line-art-arrow,svg){
  color:var(--dg-btn-green)!important;
  stroke:currentColor!important;
}

/* Hover/focus: swap colors while preserving contrast. */
.btn-solid:is(:hover,:focus-visible),
.btn-header:is(:hover,:focus-visible){
  background:var(--dg-btn-white)!important;
  border-color:var(--dg-btn-green)!important;
  color:var(--dg-btn-green)!important;
}
.btn-solid:is(:hover,:focus-visible) :is(span,.arrow,.line-art-arrow,svg),
.btn-header:is(:hover,:focus-visible) :is(span,.arrow,.line-art-arrow,svg){
  color:var(--dg-btn-green)!important;
  stroke:currentColor!important;
}
.btn-light:is(:hover,:focus-visible),
.btn-outline-light:is(:hover,:focus-visible){
  background:var(--dg-btn-green)!important;
  border-color:var(--dg-btn-white)!important;
  color:var(--dg-btn-white)!important;
}
.btn-light:is(:hover,:focus-visible) :is(span,.arrow,.line-art-arrow,svg),
.btn-outline-light:is(:hover,:focus-visible) :is(span,.arrow,.line-art-arrow,svg){
  color:var(--dg-btn-white)!important;
  stroke:currentColor!important;
}

/* Dark surfaces reverse hover back to green/white. */
:is(
 .hero,
 .feature,
 .cta-photo,
 .sourcing-final-cta,
 .sourcing-final-inner,
 .about-coffee,
 .about-cta,
 .seo-bottom-cta,
 .seo-conversion-box,
 .dark-section,
 .green-section,
 [data-theme="dark"],
 [data-surface="dark"],
 [data-surface="green"]
) :is(.btn-solid,.btn-header,.btn-light):is(:hover,:focus-visible){
  background:var(--dg-btn-green)!important;
  border-color:var(--dg-btn-white)!important;
  color:var(--dg-btn-white)!important;
}
:is(
 .hero,
 .feature,
 .cta-photo,
 .sourcing-final-cta,
 .sourcing-final-inner,
 .about-coffee,
 .about-cta,
 .seo-bottom-cta,
 .seo-conversion-box,
 .dark-section,
 .green-section,
 [data-theme="dark"],
 [data-surface="dark"],
 [data-surface="green"]
) :is(.btn-solid,.btn-header,.btn-light):is(:hover,:focus-visible) :is(span,.arrow,.line-art-arrow,svg){
  color:var(--dg-btn-white)!important;
  stroke:currentColor!important;
}