:root {
    /* ============================================================= */
    /* OPTION B (PURPLE) palette. yth-002 inverts yth-001 Option A:   */
    /* primary base = PURPLE, secondary base = BLUE. All variable     */
    /* NAMES are unchanged so every pattern/block reference still     */
    /* resolves; only the hue each alias points at is flipped.        */
    /* Exact light-purple shade + accents are a draft derived from    */
    /* the YMCA brand purples — tune against the Option B comp.        */
    /* ============================================================= */

    /* PRIMARY COLORS: */
    --blue-dk: #0060af;
    --purple-dk: #5c2e91;

    /* SECONDARY COLORS: */
    --blue-md: #0089d0;
    --blue-lt: #00aeef;
    --purple-md: #92278f;
    --purple-lt: #c6168d; /* lighter purple/magenta — DRAFT, verify vs comp */

    /* NEUTRAL COLORS: */
    --black: #231f20;
    --white: #ffffff;
    --gray-lt: #f2f2f2;
    --gray: #636466;

    /* TINTS: */
    --blue-tint: #e7f3fa;
    --purple-tint: #f2e5f2;

    /* FILTERS: */
    --blue-dk-filter: brightness(0) saturate(100%) invert(21%) sepia(61%) saturate(3083%) hue-rotate(191deg) brightness(99%) contrast(102%);
    --blue-md-filter: brightness(0) saturate(100%) invert(35%) sepia(86%) saturate(3056%) hue-rotate(179deg) brightness(96%) contrast(101%);
    --blue-lt-filter: brightness(0) saturate(100%) invert(47%) sepia(98%) saturate(1789%) hue-rotate(163deg) brightness(100%) contrast(101%);
    --purple-dk-filter: brightness(0) saturate(100%) invert(13%) sepia(49%) saturate(5492%) hue-rotate(264deg) brightness(90%) contrast(80%);
    --purple-md-filter: brightness(0) saturate(100%) invert(19%) sepia(32%) saturate(6632%) hue-rotate(287deg) brightness(88%) contrast(86%);
    --purple-lt-filter: brightness(0) saturate(100%) invert(17%) sepia(55%) saturate(5243%) hue-rotate(306deg) brightness(98%) contrast(89%);
    --black-filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(13%) contrast(88%);
    --white-filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
    --gray-filter: brightness(0) saturate(100%) invert(41%) sepia(1%) saturate(147%) hue-rotate(176deg) brightness(94%) contrast(88%);
    --blue-tint-filter: brightness(0) saturate(100%) invert(98%) sepia(18%) saturate(1402%) hue-rotate(176deg) brightness(103%) contrast(97%);
    --purple-tint-filter: brightness(0) saturate(100%) invert(91%) sepia(8%) saturate(1042%) hue-rotate(259deg) brightness(99%) contrast(95%);

    /*MAPPING NEW COLORS TO OLD COLOR PALETTE NAMES — OPTION B = PURPLE PRIMARY*/

    /*primary base = PURPLE. Option B keeps CYAN as the bright accent / CTA color,
      so --primary-lt maps to cyan (not the magenta purple-lt) — this is what the
      comp uses for primary buttons, quote marks, accent borders and icons.*/
    --primary-dk: var(--purple-dk);
    --primary-md: var(--purple-md);
    --primary-lt: var(--blue-lt);

    /*secondary base = BLUE*/
    --secondary-dk: var(--blue-dk);
    --secondary-md: var(--blue-md);

    /*camp colors = purple family*/
    --camp-dk: var(--purple-dk);
    --camp-md: var(--purple-md);
    --camp-lt: var(--purple-lt);

    /*accent colors*/
    --accent-1: var(--purple-tint);
    --accent-1-hover: var(--purple-dk);
    --accent-2: var(--blue-tint);
    --accent-2-hover: var(--blue-md);
    --aoi-text: var(--purple-md);

    /* ALIASED FILTERS for mapping */
    --primary-dk-filter: var(--purple-dk-filter);
    --primary-md-filter: var(--purple-md-filter);
    --primary-lt-filter: var(--blue-lt-filter);
    --camp-dk-filter: var(--purple-dk-filter);
    --camp-md-filter: var(--purple-md-filter);
    --camp-lt-filter: var(--purple-lt-filter);
    --accent-1-filter: var(--purple-tint-filter);
    --accent-2-filter: var(--blue-dk-filter);

    /*buttons:*/

    --primary-btn-text: var(--white);
    --primary-btn-hover-text: var(--white);

    --accent-2-btn-text: var(--black);
    --accent-2-hover-btn-text: var(--white);
}