/* ============================================================
   Section Themes

   Set data-theme="for_him" or data-theme="for_her" on a wrapper
   element. Components use --theme-* variables via their base BEM
   classes. No --themed modifier classes needed.
   ============================================================ */

/* ---- Default Theme ---- */

:root {
  --theme-accent: #1a1a1a;
  --theme-accent-hover: #2a2a2a;
  --theme-accent-bg: #f9fafb;
  --theme-button-bg: #1a1a1a;
  --theme-button-hover-bg: #2a2a2a;
  --theme-button-text: #ffffff;

  --theme-newsletter-bg: #1a1a1a;
  --theme-newsletter-text: #ffffff;
  --theme-newsletter-subtext: #9ca3af;
  --theme-newsletter-input-bg: rgba(255, 255, 255, 0.06);
  --theme-newsletter-btn-bg: var(--color-gold);
  --theme-newsletter-btn-text: #1a1a1a;
  --theme-newsletter-btn-border: transparent;

  --theme-review-bg: #fafaf8;

  --theme-hero-wash: #FBF6EB;
  --theme-hero-wash-92: rgba(245, 244, 241, 0.92);
  --theme-hero-wash-60: rgba(245, 244, 241, 0.6);
  --theme-hero-wash-25: rgba(245, 244, 241, 0.25);
  --theme-hero-wash-mobile-95: rgba(245, 244, 241, 0.95);
  --theme-hero-wash-mobile-85: rgba(245, 244, 241, 0.85);
  --theme-hero-wash-mobile-70: rgba(245, 244, 241, 0.7);

  --theme-card-hover-bg: #ffffff;
  --theme-card-hover-text: #111827;
  --theme-card-hover-subtext: #6b7280;

  --theme-hiw-button-bg: #ffffff;
  --theme-hiw-button-text: #1a1a1a;
  --theme-hiw-button-hover-bg: #e5e7eb;
  --theme-hiw-accent: #ffffff;
  --theme-hiw-accent-bg: rgba(255, 255, 255, 0.1);
}

/* ---- Section hero — wider content so title fits on 2 lines ---- */

[data-theme] .hero__content {
  max-width: 680px;
}

/* ---- For Him ---- */

[data-theme="for_him"] {
  --theme-kicker-color: #7c999a;
  --theme-icon-bg: rgba(124, 153, 154, 0.12);
  --theme-icon-color: #7c999a;
  --theme-accent: #363f3e;
  --theme-accent-hover: #4a5554;
  --theme-accent-bg: #f0f3f3;
  --theme-button-bg: #363f3e;
  --theme-button-hover-bg: #4a5554;
  --theme-button-text: #ffffff;

  --theme-newsletter-bg: linear-gradient(-69deg, #343f3e, #425050);
  --theme-newsletter-text: #ffffff;
  --theme-newsletter-subtext: rgba(255, 255, 255, 0.7);
  --theme-newsletter-input-bg: #788283;
  --theme-newsletter-btn-bg: #ffffff;
  --theme-newsletter-btn-text: #343f3e;
  --theme-newsletter-btn-border: #ffffff;

  --theme-review-bg: #c1d0d7;

  --theme-hero-wash: #e8eeed;
  --theme-hero-wash-92: rgba(232, 238, 237, 0.92);
  --theme-hero-wash-60: rgba(232, 238, 237, 0.6);
  --theme-hero-wash-25: rgba(232, 238, 237, 0.25);
  --theme-hero-wash-mobile-95: rgba(232, 238, 237, 0.95);
  --theme-hero-wash-mobile-85: rgba(232, 238, 237, 0.85);
  --theme-hero-wash-mobile-70: rgba(232, 238, 237, 0.7);

  --theme-card-hover-bg: linear-gradient(-69deg, #363f3e 0%, #7c999a 100%);
  --theme-card-hover-text: #ffffff;
  --theme-card-hover-subtext: rgba(255, 255, 255, 0.7);

  --theme-hiw-button-bg: #ffffff;
  --theme-hiw-button-text: #363f3e;
  --theme-hiw-button-hover-bg: #e5e7eb;
  --theme-hiw-accent: #7c999a;
  --theme-hiw-accent-bg: rgba(124, 153, 154, 0.15);
}

/* ---- For Her ---- */

[data-theme="for_her"] {
  --theme-kicker-color: #a07790;
  --theme-icon-bg: rgba(160, 119, 144, 0.12);
  --theme-icon-color: #a07790;
  --theme-accent: #674f5d;
  --theme-accent-hover: #7d6371;
  --theme-accent-bg: #f5f0f3;
  --theme-button-bg: #674f5d;
  --theme-button-hover-bg: #7d6371;
  --theme-button-text: #ffffff;

  --theme-newsletter-bg: linear-gradient(-69deg, #67a691 0%, #8ebaa6 71%);
  --theme-newsletter-text: #ffffff;
  --theme-newsletter-subtext: rgba(255, 255, 255, 0.7);
  --theme-newsletter-input-bg: #abcbbe;
  --theme-newsletter-btn-bg: linear-gradient(-180deg, #684f5e 0%, #a07790 71%);
  --theme-newsletter-btn-text: #ffffff;
  --theme-newsletter-btn-border: #ffffff;

  --theme-review-bg: #a17b62;

  --theme-hero-wash: #f0e8ec;
  --theme-hero-wash-92: rgba(240, 232, 236, 0.92);
  --theme-hero-wash-60: rgba(240, 232, 236, 0.6);
  --theme-hero-wash-25: rgba(240, 232, 236, 0.25);
  --theme-hero-wash-mobile-95: rgba(240, 232, 236, 0.95);
  --theme-hero-wash-mobile-85: rgba(240, 232, 236, 0.85);
  --theme-hero-wash-mobile-70: rgba(240, 232, 236, 0.7);

  --theme-card-hover-bg: linear-gradient(-69deg, #eec7c1 0%, #ffe4d4 100%);
  --theme-card-hover-text: #1a1a1a;
  --theme-card-hover-subtext: #4b5563;

  --theme-hiw-button-bg: #ffffff;
  --theme-hiw-button-text: #674f5d;
  --theme-hiw-button-hover-bg: #e5e7eb;
  --theme-hiw-accent: #a07790;
  --theme-hiw-accent-bg: rgba(160, 119, 144, 0.15);
}