/*
 * ════════════════════════════════════════════════════════════════
 * AY-BUTTONS.CSS — Phase 2 : Boutons Glossy
 * Armand Yomi Theme v2.5.0
 *
 * MODULE INDÉPENDANT — règles d'architecture :
 *   ✓ Zéro couleur hardcodée — 100% var(--ay-*)
 *   ✓ Dark + Light automatique via tokens
 *   ✓ Remplace les règles .btn-* de style.css (chargé après)
 *   ✓ !important INTERDIT ici — priorité gérée par l'ordre de chargement
 *   ✓ prefers-reduced-motion respecté (voir fin de fichier)
 *   ✓ focus-visible accessible sur chaque bouton
 *
 * VARIANTES :
 *   .btn-primary   → Gold glossy — CTA principal
 *   .btn-secondary → Verre neutre — action secondaire
 *   .btn-outline   → Ring gold — variante tertiaire
 *   .btn-ghost     → Underline subtil — action discrète
 *   .btn-icon      → Cercle glass — icônes seules
 *   .nav-cta       → Pill gold — nav desktop
 *   .mobile-nav-cta → Full-width gold — drawer mobile
 *   .filter-btn    → Pill neutral — filtres portfolio
 *   .cookie-accept → Pill compact — cookie banner
 *   .testi-arrow   → Cercle compact — navigation slider
 *   .theme-toggle-btn → Cercle glass — toggle dark/light
 *
 * ════════════════════════════════════════════════════════════════
 */

/* ════════════════════════════════════════════════════════════════
   A. BASE PARTAGÉE — propriétés communes à tous les boutons
   ════════════════════════════════════════════════════════════════ */
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-ghost,
.btn-icon,
.nav-cta,
.filter-btn,
.cookie-accept {
  /* Reset */
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  /* Base */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  /* Typo */
  font-family: var(--ay-font-mono);
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: var(--ay-tracking-mono);
  text-transform: uppercase;
  line-height: 1;
  /* Transition globale */
  transition:
    background    var(--ay-dur-base) var(--ay-ease),
    border-color  var(--ay-dur-base) var(--ay-ease),
    box-shadow    var(--ay-dur-base) var(--ay-ease),
    color         var(--ay-dur-base) var(--ay-ease),
    transform     var(--ay-dur-fast) var(--ay-ease),
    opacity       var(--ay-dur-fast) var(--ay-ease);
  /* Éviter la sélection de texte au clic rapide */
  user-select: none;
  -webkit-user-select: none;
}

/* Focus accessible — global */
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-outline:focus-visible,
.btn-ghost:focus-visible,
.btn-icon:focus-visible,
.nav-cta:focus-visible,
.filter-btn:focus-visible,
.cookie-accept:focus-visible,
.testi-arrow:focus-visible,
.theme-toggle-btn:focus-visible {
  outline: 2px solid var(--ay-gold);
  outline-offset: 3px;
}

/* Active state — micro-feedback au clic */
.btn-primary:active,
.btn-secondary:active,
.btn-outline:active,
.nav-cta:active,
.filter-btn:active,
.cookie-accept:active {
  transform: scale(.97) translateY(0) !important;
  transition-duration: var(--ay-dur-fast);
}

/* ════════════════════════════════════════════════════════════════
   B. BTN-PRIMARY — Gold Glossy
   Structure glass multi-couches :
     1. Fond or translucide
     2. backdrop-filter blur + saturate
     3. Gradient diagonal subtil
     4. Highlight inset blanc en haut (effet verre)
     5. Shadow or en bas (profondeur)
   ════════════════════════════════════════════════════════════════ */
.btn-primary {
  /* Géométrie */
  padding: .9rem 2.2rem;
  border-radius: var(--ay-radius-pill);
  /* Couleur texte */
  color: var(--ay-black);
  /* ── Fond glass gold ── */
  background:
    linear-gradient(
      160deg,
      rgba(var(--ay-rgb-fg), .08) 0%,
      rgba(var(--ay-rgb-fg), .0)  60%
    ),
    var(--ay-gold);
  /* ── Bordure fine brillante ── */
  border: 1px solid var(--ay-gold-border);
  /* ── Ombres multi-couches ── */
  box-shadow:
    /* Highlight inset haut — effet verre convexe */
    inset 0 1.5px 0 rgba(var(--ay-rgb-fg), .35),
    /* Ombre inset basse — profondeur */
    inset 0 -1.5px 0 rgba(var(--ay-rgb-bg), .18),
    /* Halo or externe */
    var(--ay-glow-gold),
    /* Ombre portée */
    0 4px 16px rgba(var(--ay-rgb-bg), .2);
  /* Blur glass */
  backdrop-filter:         blur(var(--ay-btn-blur)) saturate(var(--ay-btn-saturate));
  -webkit-backdrop-filter: blur(var(--ay-btn-blur)) saturate(var(--ay-btn-saturate));
}

.btn-primary:hover {
  background:
    linear-gradient(
      160deg,
      rgba(var(--ay-rgb-fg), .14) 0%,
      rgba(var(--ay-rgb-fg), .02) 60%
    ),
    var(--ay-gold-dark);
  box-shadow:
    inset 0 1.5px 0 rgba(var(--ay-rgb-fg), .45),
    inset 0 -1.5px 0 rgba(var(--ay-rgb-bg), .22),
    0 0 32px rgba(var(--ay-rgb-bg), .06),
    var(--ay-glow-gold),
    0 8px 28px rgba(var(--ay-rgb-bg), .28);
  transform: translateY(-2px);
  border-color: var(--ay-gold-border);
}

/* ── Shimmer au hover — pseudo-élément diagonal ── */
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent  0%,
    rgba(var(--ay-rgb-fg), .22) 45%,
    rgba(var(--ay-rgb-fg), .28) 50%,
    rgba(var(--ay-rgb-fg), .22) 55%,
    transparent  100%
  );
  transform: translateX(-100%);
  transition: transform .55s var(--ay-ease);
  pointer-events: none;
}
.btn-primary:hover::before { transform: translateX(120%); }

/* ════════════════════════════════════════════════════════════════
   C. BTN-SECONDARY — Verre neutre, contour blue
   ════════════════════════════════════════════════════════════════ */
.btn-secondary {
  padding: .85rem 2.2rem;
  border-radius: var(--ay-radius-pill);
  color: var(--ay-white);
  background: rgba(var(--ay-rgb-fg), .06);
  border: 1.5px solid var(--ay-border-h);
  backdrop-filter:         blur(var(--ay-btn-blur)) saturate(var(--ay-btn-saturate));
  -webkit-backdrop-filter: blur(var(--ay-btn-blur)) saturate(var(--ay-btn-saturate));
  box-shadow:
    inset 0 1px 0 rgba(var(--ay-rgb-fg), .12),
    inset 0 -1px 0 rgba(var(--ay-rgb-bg), .08),
    0 2px 12px rgba(var(--ay-rgb-bg), .15);
}
.btn-secondary:hover {
  border-color: var(--ay-blue);
  background: rgba(var(--ay-rgb-fg), .1);
  box-shadow:
    inset 0 1px 0 rgba(var(--ay-rgb-fg), .18),
    var(--ay-glow-blue),
    0 6px 22px rgba(var(--ay-rgb-bg), .2);
  transform: translateY(-2px);
  color: var(--ay-white);
}

/* ════════════════════════════════════════════════════════════════
   D. BTN-OUTLINE — Ring gold, transparent
   ════════════════════════════════════════════════════════════════ */
.btn-outline {
  padding: .85rem 2.2rem;
  border-radius: var(--ay-radius-pill);
  color: var(--ay-gold);
  background: rgba(var(--ay-rgb-fg), .04);
  border: 1.5px solid var(--ay-gold);
  backdrop-filter:         blur(var(--ay-btn-blur)) saturate(var(--ay-btn-saturate));
  -webkit-backdrop-filter: blur(var(--ay-btn-blur)) saturate(var(--ay-btn-saturate));
  box-shadow:
    inset 0 1px 0 rgba(var(--ay-rgb-fg), .1),
    0 2px 10px rgba(var(--ay-rgb-bg), .12);
}
.btn-outline:hover {
  background: var(--ay-gold);
  color: var(--ay-black);
  box-shadow:
    inset 0 1.5px 0 rgba(var(--ay-rgb-fg), .35),
    inset 0 -1.5px 0 rgba(var(--ay-rgb-bg), .15),
    var(--ay-glow-gold),
    0 8px 24px rgba(var(--ay-rgb-bg), .22);
  transform: translateY(-2px);
}

/* ════════════════════════════════════════════════════════════════
   E. BTN-GHOST — Underline subtil
   ════════════════════════════════════════════════════════════════ */
.btn-ghost {
  padding: 0 0 3px 0;
  border-radius: 0;
  color: var(--ay-soft);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ay-border);
  font-size: .68rem;
  letter-spacing: var(--ay-tracking-mono);
  backdrop-filter: none;
  box-shadow: none;
}
.btn-ghost:hover {
  color: var(--ay-gold);
  border-color: var(--ay-gold);
  transform: none;
}
.btn-ghost:active { transform: none !important; }

/* ════════════════════════════════════════════════════════════════
   F. BTN-ICON — Cercle glass pour icônes
   ════════════════════════════════════════════════════════════════ */
.btn-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--ay-radius-pill);
  color: var(--ay-soft);
  background: rgba(var(--ay-rgb-fg), .06);
  border: 1px solid var(--ay-border);
  backdrop-filter:         blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(var(--ay-rgb-fg), .1),
    0 2px 8px rgba(var(--ay-rgb-bg), .12);
  font-size: 1rem;
  flex-shrink: 0;
}
.btn-icon:hover {
  color: var(--ay-gold);
  border-color: var(--ay-gold);
  background: var(--ay-gold-dim);
  box-shadow:
    inset 0 1px 0 rgba(var(--ay-rgb-fg), .2),
    var(--ay-glow-gold),
    0 4px 14px rgba(var(--ay-rgb-bg), .15);
  transform: translateY(-1px);
}

/* ════════════════════════════════════════════════════════════════
   G. NAV-CTA — Pill gold desktop navigation
   ════════════════════════════════════════════════════════════════ */
.nav-cta {
  padding: .55rem 1.4rem;
  border-radius: var(--ay-radius-pill);
  color: var(--ay-black);
  font-size: .65rem;
  background:
    linear-gradient(160deg, rgba(var(--ay-rgb-fg),.1) 0%, transparent 60%),
    var(--ay-gold);
  border: 1px solid var(--ay-gold-border);
  backdrop-filter:         blur(var(--ay-btn-blur)) saturate(var(--ay-btn-saturate));
  -webkit-backdrop-filter: blur(var(--ay-btn-blur)) saturate(var(--ay-btn-saturate));
  box-shadow:
    inset 0 1px 0 rgba(var(--ay-rgb-fg), .3),
    inset 0 -1px 0 rgba(var(--ay-rgb-bg), .12),
    var(--ay-glow-gold),
    0 3px 12px rgba(var(--ay-rgb-bg), .18);
  position: relative;
  overflow: hidden;
}
.nav-cta::after { display: none !important; }
.nav-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(var(--ay-rgb-fg),.2) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  transition: transform .5s var(--ay-ease);
  pointer-events: none;
}
.nav-cta:hover {
  background:
    linear-gradient(160deg, rgba(var(--ay-rgb-fg),.16) 0%, transparent 60%),
    var(--ay-gold-dark);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(var(--ay-rgb-fg), .4),
    inset 0 -1px 0 rgba(var(--ay-rgb-bg), .16),
    var(--ay-glow-gold),
    0 6px 20px rgba(var(--ay-rgb-bg), .25);
}
.nav-cta:hover::before { transform: translateX(120%); }

/* ════════════════════════════════════════════════════════════════
   H. MOBILE-NAV-CTA — Full-width dans le drawer
   ════════════════════════════════════════════════════════════════ */
.mobile-nav-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: .85rem 1.5rem;
  border-radius: var(--ay-radius-pill);
  color: var(--ay-black);
  font-family: var(--ay-font-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: var(--ay-tracking-mono);
  text-transform: uppercase;
  background:
    linear-gradient(160deg, rgba(var(--ay-rgb-fg),.1) 0%, transparent 60%),
    var(--ay-gold);
  border: 1px solid var(--ay-gold-border);
  backdrop-filter:         blur(var(--ay-btn-blur)) saturate(var(--ay-btn-saturate));
  -webkit-backdrop-filter: blur(var(--ay-btn-blur)) saturate(var(--ay-btn-saturate));
  box-shadow:
    inset 0 1.5px 0 rgba(var(--ay-rgb-fg), .3),
    inset 0 -1.5px 0 rgba(var(--ay-rgb-bg), .12),
    var(--ay-glow-gold);
  transition: background var(--ay-dur-base) var(--ay-ease),
              box-shadow  var(--ay-dur-base) var(--ay-ease),
              transform   var(--ay-dur-fast) var(--ay-ease);
  cursor: pointer;
}
.mobile-nav-cta:hover { background: var(--ay-gold-dark); transform: none; }

/* ════════════════════════════════════════════════════════════════
   I. FILTER-BTN — Pill neutre, actif gold
   ════════════════════════════════════════════════════════════════ */
.filter-btn {
  padding: .45rem 1.2rem;
  border-radius: var(--ay-radius-pill);
  color: var(--ay-muted);
  font-size: .6rem;
  background: rgba(var(--ay-rgb-fg), .04);
  border: 1px solid var(--ay-border);
  backdrop-filter:         blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  box-shadow:
    inset 0 1px 0 rgba(var(--ay-rgb-fg), .07),
    0 1px 6px rgba(var(--ay-rgb-bg), .1);
}
.filter-btn:hover {
  color: var(--ay-white);
  border-color: var(--ay-border-h);
  background: rgba(var(--ay-rgb-fg), .08);
  box-shadow:
    inset 0 1px 0 rgba(var(--ay-rgb-fg), .12),
    0 2px 10px rgba(var(--ay-rgb-bg), .15);
}
.filter-btn.active {
  color: var(--ay-black);
  background:
    linear-gradient(160deg, rgba(var(--ay-rgb-fg),.1) 0%, transparent 60%),
    var(--ay-gold);
  border-color: var(--ay-gold-border);
  box-shadow:
    inset 0 1px 0 rgba(var(--ay-rgb-fg), .28),
    inset 0 -1px 0 rgba(var(--ay-rgb-bg), .1),
    var(--ay-glow-gold),
    0 3px 12px rgba(var(--ay-rgb-bg), .18);
}

/* ════════════════════════════════════════════════════════════════
   J. COOKIE-ACCEPT — Pill compact
   ════════════════════════════════════════════════════════════════ */
.cookie-accept {
  padding: .42rem 1.1rem;
  border-radius: var(--ay-radius-pill);
  color: var(--ay-black);
  font-size: .58rem;
  background:
    linear-gradient(160deg, rgba(var(--ay-rgb-fg),.1) 0%, transparent 60%),
    var(--ay-gold);
  border: 1px solid var(--ay-gold-border);
  box-shadow:
    inset 0 1px 0 rgba(var(--ay-rgb-fg), .3),
    var(--ay-glow-gold);
}
.cookie-accept:hover {
  background: var(--ay-gold-dark);
  transform: translateY(-1px);
}

/* ════════════════════════════════════════════════════════════════
   K. TESTI-ARROW — Cercle compact navigation slider
   ════════════════════════════════════════════════════════════════ */
.testi-arrow {
  width: 38px;
  height: 38px;
  border-radius: var(--ay-radius-pill);
  color: var(--ay-soft);
  background: rgba(var(--ay-rgb-fg), .05);
  border: 1px solid var(--ay-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  backdrop-filter:         blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  box-shadow:
    inset 0 1px 0 rgba(var(--ay-rgb-fg), .1),
    0 2px 8px rgba(var(--ay-rgb-bg), .12);
  transition:
    background    var(--ay-dur-base) var(--ay-ease),
    border-color  var(--ay-dur-base) var(--ay-ease),
    box-shadow    var(--ay-dur-base) var(--ay-ease),
    transform     var(--ay-dur-fast) var(--ay-ease);
}
.testi-arrow svg {
  width: 14px; height: 14px;
  fill: none;
  stroke: var(--ay-soft);
  stroke-width: 2;
  transition: stroke var(--ay-dur-base) var(--ay-ease);
}
.testi-arrow:hover {
  background: var(--ay-white);
  border-color: var(--ay-white);
  box-shadow:
    inset 0 1px 0 rgba(var(--ay-rgb-fg), .2),
    0 4px 14px rgba(var(--ay-rgb-bg), .2);
  transform: translateY(-1px);
}
.testi-arrow:hover svg { stroke: var(--ay-bg); }

/* ════════════════════════════════════════════════════════════════
   L. THEME-TOGGLE-BTN — Cercle glass pour dark/light switch
   ════════════════════════════════════════════════════════════════ */
.theme-toggle-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--ay-radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ay-muted);
  font-size: 1rem;
  line-height: 1;
  background: rgba(var(--ay-rgb-fg), .05);
  border: 1px solid var(--ay-border);
  backdrop-filter:         blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(var(--ay-rgb-fg), .1),
    0 2px 8px rgba(var(--ay-rgb-bg), .1);
  cursor: pointer;
  transition:
    background    var(--ay-dur-base) var(--ay-ease),
    border-color  var(--ay-dur-base) var(--ay-ease),
    color         var(--ay-dur-base) var(--ay-ease),
    box-shadow    var(--ay-dur-base) var(--ay-ease),
    transform     var(--ay-dur-fast) var(--ay-ease);
  flex-shrink: 0;
}
.theme-toggle-btn:hover {
  color: var(--ay-gold);
  border-color: var(--ay-gold);
  background: var(--ay-gold-dim);
  box-shadow:
    inset 0 1px 0 rgba(var(--ay-rgb-fg), .18),
    var(--ay-glow-gold),
    0 4px 14px rgba(var(--ay-rgb-bg), .15);
  transform: rotate(20deg) scale(1.05);
}

/* ════════════════════════════════════════════════════════════════
   M. STATES — Disabled
   ════════════════════════════════════════════════════════════════ */
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-outline:disabled,
.nav-cta:disabled,
.filter-btn:disabled,
.cookie-accept:disabled,
#sba-submit-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  pointer-events: none;
}

/* Loading state — spinner inline */
.btn-primary.is-loading,
#sba-submit-btn.is-loading {
  color: transparent;
  position: relative;
  pointer-events: none;
}
.btn-primary.is-loading::after,
#sba-submit-btn.is-loading::after {
  content: '';
  position: absolute;
  inset: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(var(--ay-rgb-bg), .3);
  border-top-color: var(--ay-black);
  border-radius: var(--ay-radius-pill);
  animation: ay-spin .7s linear infinite;
}
@keyframes ay-spin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════════════
   N. LIGHT MODE — overrides glossy plus intenses en clair
   Les tokens light redéfinissent déjà la plupart des couleurs.
   Ces règles ajustent ce que les tokens seuls ne peuvent pas faire
   (opacités, gradients directionnels adaptés au fond clair).
   ════════════════════════════════════════════════════════════════ */

/* Primary : gold plus saturé + ombre plus visible en clair */
[data-theme="light"] .btn-primary,
[data-theme="light"] .nav-cta,
[data-theme="light"] .mobile-nav-cta,
[data-theme="light"] .cookie-accept {
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.55),
    inset 0 -1.5px 0 rgba(var(--ay-rgb-bg),.15),
    var(--ay-glow-gold),
    0 4px 18px rgba(var(--ay-rgb-bg),.18);
}
[data-theme="light"] .btn-primary:hover,
[data-theme="light"] .nav-cta:hover {
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.65),
    inset 0 -1.5px 0 rgba(var(--ay-rgb-bg),.2),
    var(--ay-glow-gold),
    0 8px 28px rgba(var(--ay-rgb-bg),.22);
}

/* Secondary : fond plus visible en clair */
[data-theme="light"] .btn-secondary {
  background: rgba(255,255,255,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 -1px 0 rgba(var(--ay-rgb-bg),.06),
    0 2px 12px rgba(var(--ay-rgb-bg),.08);
}
[data-theme="light"] .btn-secondary:hover {
  background: rgba(255,255,255,.75);
}

/* Outline : ring bien visible */
[data-theme="light"] .btn-outline {
  background: rgba(255,255,255,.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 2px 8px rgba(var(--ay-rgb-bg),.06);
}

/* Filter : pills claires */
[data-theme="light"] .filter-btn {
  background: rgba(255,255,255,.52);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    0 1px 6px rgba(var(--ay-rgb-bg),.06);
}

/* Testi arrow : cercles plus définis */
[data-theme="light"] .testi-arrow {
  background: rgba(255,255,255,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 2px 8px rgba(var(--ay-rgb-bg),.08);
}
[data-theme="light"] .testi-arrow:hover {
  background: var(--ay-white);
  border-color: var(--ay-border-h);
}
[data-theme="light"] .testi-arrow:hover svg { stroke: var(--ay-bg); }

/* Theme toggle : glass clair */
[data-theme="light"] .theme-toggle-btn {
  background: rgba(255,255,255,.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 2px 8px rgba(var(--ay-rgb-bg),.07);
}

/* ════════════════════════════════════════════════════════════════
   O. PREFERS-REDUCED-MOTION — supprimer shimmer et transitions
   ════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .btn-primary::before,
  .nav-cta::before { display: none; }

  .btn-primary,
  .btn-secondary,
  .btn-outline,
  .btn-ghost,
  .btn-icon,
  .nav-cta,
  .filter-btn,
  .cookie-accept,
  .testi-arrow,
  .theme-toggle-btn,
  .mobile-nav-cta {
    transition: none;
  }
}

/* ════════════════════════════════════════════════════════════════
   P. FALLBACK — Navigateurs sans backdrop-filter
   ════════════════════════════════════════════════════════════════ */
@supports not (backdrop-filter: blur(1px)) {
  .btn-primary,
  .nav-cta,
  .mobile-nav-cta,
  .cookie-accept {
    background: var(--ay-gold);
  }
  .btn-secondary {
    background: rgba(var(--ay-rgb-fg), .1);
  }
  .btn-outline {
    background: transparent;
  }
  .filter-btn {
    background: rgba(var(--ay-rgb-fg), .06);
  }
  .testi-arrow,
  .theme-toggle-btn {
    background: rgba(var(--ay-rgb-fg), .08);
  }
  [data-theme="light"] .btn-primary,
  [data-theme="light"] .nav-cta { background: var(--ay-gold); }
  [data-theme="light"] .btn-secondary { background: rgba(255,255,255,.8); }
}