/* ============================================================
   Complete Aesthete — Colorway Theme Scopes
   ------------------------------------------------------------
   Wrap any subtree in one of these classes to re-skin every
   semantic token. The same component renders in any colorway —
   exactly how the brand ships one suite in 4 palettes.

     <div class="theme-pink"> … </div>

   Default (no class) = Something Blue.
   ============================================================ */

.theme-blue {
  --accent-deep: var(--blue-900); --accent: var(--blue-700);
  --accent-mid: var(--blue-500); --accent-soft: var(--blue-300);
  --accent-tint: var(--blue-100); --accent-wash: var(--blue-050);
  --accent-wc: var(--blue-wc); --text-script: var(--blue-700);
  --border-accent: var(--blue-300);
}

.theme-pink {
  --accent-deep: var(--pink-900); --accent: var(--pink-700);
  --accent-mid: var(--pink-500); --accent-soft: var(--pink-300);
  --accent-tint: var(--pink-100); --accent-wash: var(--pink-050);
  --accent-wc: var(--pink-wc); --text-script: var(--pink-700);
  --border-accent: var(--pink-300);
}

.theme-sage {
  --accent-deep: var(--sage-900); --accent: var(--sage-700);
  --accent-mid: var(--sage-500); --accent-soft: var(--sage-300);
  --accent-tint: var(--sage-100); --accent-wash: var(--sage-050);
  --accent-wc: var(--sage-wc); --text-script: var(--sage-700);
  --border-accent: var(--sage-300);
}

.theme-gold {
  --accent-deep: var(--gold-900); --accent: var(--gold-700);
  --accent-mid: var(--gold-500); --accent-soft: var(--gold-300);
  --accent-tint: var(--gold-100); --accent-wash: var(--gold-050);
  --accent-wc: var(--gold-wc); --text-script: var(--gold-700);
  --border-accent: var(--gold-300);
}