/* ──────────────────────────────────────────────
   Brand System
   BMW CCA Boston Chapter
   Source: Boston-BMW-Web-Style-Reference_9.21.2026.jpg
   Fonts: Adobe Typekit kit vdm5cgn (futura-pt, exo-2, instrument-serif)
   ────────────────────────────────────────────── */

/* ── Design tokens ───────────────────────────── */

:root {
    /* Brand palette (from style guide) */
    --gray-800: #191919;
    --text-gray: #565656;
    --gray-500: #828282;
    --gray-300: #bcbcbc;
    --white: #ffffff;

    --tan-300: #faf7f2;
    --tan-200: #f9f7f5;
    --tan-100: #f9f9f9;

    --blue-600: #283c8e;
    --blue-500: #2b53cd;
    --blue-100: #bde6ef;

    --red-600: #c62b02;
    --red-500: #ec4300;
    --red-100: #f7e4e4;

    --gold-600: #dda322;
    --gold-500: #f4bd3f;
    --gold-100: #ffdf9f;

    /* Font stacks */
    --font-heading: "futura-pt", sans-serif;
    --font-subheading: "instrument-serif", serif;
    --font-body: "exo-2-variable", sans-serif;

    /* Shape */
    --btn-radius: 6px;

    /* Theme semantic tokens */
    --color-bmw-blue:       #3b6fb5;
    --color-bmw-blue-dark:  #2f5a94;
    --color-bmw-red:        #c03a2b;
    --color-bmw-red-dark:   #a22f22;
    --color-bmw-gold:       #d4a843;
    --color-bmw-gold-dark:  #b8922f;
    --color-cta-blue:       #2b53cd;

    /* M-Stripe */
    --color-m-blue:         #0066B1;
    --color-m-violet:       #312783;
    --color-m-red:          #ED1C24;

    /* Neutral scale */
    --color-white:          #ffffff;
    --color-off-white:      #f5f5f5;
    --color-gray-100:       #f7f8f9;
    --color-gray-200:       #e8e8e8;
    --color-gray-300:       #d0d0d0;
    --color-gray-400:       #aaaaaa;
    --color-gray-500:       #888888;
    --color-gray-600:       #666666;
    --color-gray-700:       #464646;
    --color-gray-800:       #2a2a2a;
    --color-gray-900:       #1a1a1a;

    /* Surfaces */
    --color-dark-bg:        #222428;

    /* Event tags */
    --color-tag-red:        #e05a47;
    --color-tag-blue:       #4a7fbf;
    --color-tag-green:      #3a8a4a;
    --color-tag-orange:     #d4872a;
}


/* ──────────────────────────────────────────────
   Font Utility Classes
   ────────────────────────────────────────────── */

/* ── Shorthand ───────────────────────────────── */

.font-futurapt {
    font-family: "futura-pt", sans-serif;
}

.font-instrument {
    font-family: "instrument-serif", serif;
}

.font-exo2 {
    font-family: "exo-2-variable", sans-serif;
}

/* ── futura-pt (Adobe Typekit) ───────────────── */

.futura-pt-400 {
    font-family: "futura-pt", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.futura-pt-400i {
    font-family: "futura-pt", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.futura-pt-500 {
    font-family: "futura-pt", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.futura-pt-500i {
    font-family: "futura-pt", sans-serif;
    font-weight: 500;
    font-style: italic;
}

.futura-pt-600 {
    font-family: "futura-pt", sans-serif;
    font-weight: 600;
    font-style: normal;
}

.futura-pt-600i {
    font-family: "futura-pt", sans-serif;
    font-weight: 600;
    font-style: italic;
}

.futura-pt-700 {
    font-family: "futura-pt", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.futura-pt-700i {
    font-family: "futura-pt", sans-serif;
    font-weight: 700;
    font-style: italic;
}

.futura-pt-800 {
    font-family: "futura-pt", sans-serif;
    font-weight: 800;
    font-style: normal;
}

.futura-pt-800i {
    font-family: "futura-pt", sans-serif;
    font-weight: 800;
    font-style: italic;
}

/* ── Exo 2 (Adobe Typekit, variable) ─────────── */

.exo2-300 {
    font-family: "exo-2-variable", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.exo2-300i {
    font-family: "exo-2-variable", sans-serif;
    font-weight: 300;
    font-style: italic;
}

.exo2-400 {
    font-family: "exo-2-variable", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.exo2-400i {
    font-family: "exo-2-variable", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.exo2-500 {
    font-family: "exo-2-variable", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.exo2-500i {
    font-family: "exo-2-variable", sans-serif;
    font-weight: 500;
    font-style: italic;
}

.exo2-600 {
    font-family: "exo-2-variable", sans-serif;
    font-weight: 600;
    font-style: normal;
}

.exo2-600i {
    font-family: "exo-2-variable", sans-serif;
    font-weight: 600;
    font-style: italic;
}

.exo2-700 {
    font-family: "exo-2-variable", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.exo2-700i {
    font-family: "exo-2-variable", sans-serif;
    font-weight: 700;
    font-style: italic;
}

.exo2-800 {
    font-family: "exo-2-variable", sans-serif;
    font-weight: 800;
    font-style: normal;
}

.exo2-800i {
    font-family: "exo-2-variable", sans-serif;
    font-weight: 800;
    font-style: italic;
}

/* ── Instrument Serif (Adobe Typekit) ──────────── */

.instrument-serif {
    font-family: "instrument-serif", serif;
    font-weight: 400;
    font-style: normal;
}

.instrument-serif-i {
    font-family: "instrument-serif", serif;
    font-weight: 400;
    font-style: italic;
}


/* ──────────────────────────────────────────────
   Base Typography
   ────────────────────────────────────────────── */

h1 {
    font-family: var(--font-heading);
    font-weight: 800;
    letter-spacing: -0.045em;
}

h2, h3 {
    font-family: var(--font-subheading);
    font-weight: 400;
}

h4, h5, h6 {
    font-family: var(--font-subheading);
    font-weight: 400;
    text-transform: capitalize;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--color-gray-900);
}


/* ──────────────────────────────────────────────
   Brand Buttons (style guide A1-A4)
   ────────────────────────────────────────────── */

.btn-a1,
.btn-a2,
.btn-a3,
.btn-a4 {
    display: block;
    width: 100%;
    padding: 17px 30px;
    border-radius: var(--btn-radius);
    font-size: 18px;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.25s ease, transform 0.15s ease;
    border: none;
    box-sizing: border-box;
}

@media (min-width: 840px) {
    .btn-a1,
    .btn-a2,
    .btn-a3,
    .btn-a4 {
        display: inline-block;
        width: auto;
    }
}

/* A1: outline CTA */

.btn-a1 {
    font-family: var(--font-heading);
    font-weight: 800;
    letter-spacing: -0.045em;
    text-transform: uppercase;
    background: transparent;
    border: 1px solid var(--gray-800);
    color: var(--red-500);
}

.btn-a1:hover,
.btn-a1:active,
.btn-a1:focus {
    background-color: var(--red-500);
    border-color: var(--red-500);
    color: var(--white);
    transform: translateY(-1px);
}

/* A2: blue filled */

.btn-a2 {
    font-family: var(--font-body);
    font-weight: 400;
    background-color: var(--blue-500);
    color: var(--white);
}

.btn-a2:hover,
.btn-a2:active,
.btn-a2:focus {
    background-color: var(--blue-600);
    color: var(--white);
    transform: translateY(-1px);
}

/* A3: gold filled */

.btn-a3 {
    font-family: var(--font-body);
    font-weight: 400;
    background-color: var(--gold-500);
    color: var(--white);
}

.btn-a3:hover,
.btn-a3:active,
.btn-a3:focus {
    background-color: var(--gold-600);
    color: var(--white);
    transform: translateY(-1px);
}

/* A4: red filled */

.btn-a4 {
    font-family: var(--font-body);
    font-weight: 400;
    background-color: var(--red-500);
    color: var(--white);
}

.btn-a4:hover,
.btn-a4:active,
.btn-a4:focus {
    background-color: var(--red-600);
    color: var(--white);
    transform: translateY(-1px);
}


/* ──────────────────────────────────────────────
   Theme Buttons
   ────────────────────────────────────────────── */

/* ── Base button ─────────────────────────────── */
.btn {
    display: inline-block;
    font-family: "futura-pt", sans-serif;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    line-height: 1;
}

/* ── Primary (blue, filled) ──────────────────── */
.btn-primary {
    background-color: var(--color-bmw-blue);
    color: var(--color-white);
    border: 2px solid var(--color-bmw-blue);
    border-radius: 4px;
    padding: 14px 30px;
    font-size: 15px;
    transition: background-color 0.25s ease, transform 0.15s ease;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--color-bmw-blue-dark);
    border-color: var(--color-bmw-blue-dark);
    color: var(--color-white);
    text-decoration: none;
    transform: translateY(-1px);
}

/* ── Membership (dark border, red text, square) ─ */
.btn-membership {
    background-color: transparent;
    color: var(--color-bmw-red);
    border: 2px solid var(--color-gray-800);
    border-radius: 0;
    padding: 14px 30px;
    font-size: 15px;
}

/* ── Outline blue ────────────────────────────── */
.btn-outline {
    background-color: transparent;
    color: var(--color-bmw-blue);
    border: 2px solid var(--color-bmw-blue);
    border-radius: 4px;
    padding: 14px 30px;
    font-size: 15px;
    transition: background-color 0.25s ease, transform 0.15s ease;
}

.btn-outline:hover,
.btn-outline:focus {
    background-color: var(--color-bmw-blue);
    color: var(--color-white);
    text-decoration: none;
    transform: translateY(-1px);
}

/* ── Outline white (dark backgrounds) ────────── */
.btn-outline-white {
    background-color: transparent;
    color: var(--color-white);
    border: 2px solid var(--color-white);
    border-radius: 4px;
    padding: 14px 30px;
    font-size: 15px;
    transition: background-color 0.25s ease, transform 0.15s ease;
}

.btn-outline-white:hover,
.btn-outline-white:focus {
    background-color: var(--color-white);
    color: var(--color-dark-bg);
    text-decoration: none;
    transform: translateY(-1px);
}


/* ──────────────────────────────────────────────
   Wipe Hover Effect
   Add data-wipe="Button Text" to any .btn with
   squared borders. Fills from left on hover.
   ────────────────────────────────────────────── */

[data-wipe] {
    position: relative;
    overflow: hidden;
    transition: none;
}

[data-wipe]::before,
[data-wipe]::after {
    content: attr(data-wipe);
    padding-top: inherit;
    padding-bottom: inherit;
    white-space: nowrap;
    position: absolute;
    top: 0;
    overflow: hidden;
}

[data-wipe]::before {
    left: 0;
    width: 0;
    text-indent: 18px;
}

[data-wipe]::after {
    padding-left: inherit;
    padding-right: inherit;
    left: 100%;
    text-indent: calc(-100% - 36px);
    transition: 0.2s ease-in-out;
}

[data-wipe]:hover::before {
    width: 100%;
    transition: width 0.2s ease-in-out;
}

[data-wipe]:hover::after {
    left: 0;
    text-indent: 0;
    transition: 0s 0.2s ease-in-out;
}

/* Wipe color: membership (dark fill, white text) */
.btn-membership[data-wipe]::before,
.btn-membership[data-wipe]::after {
    color: var(--color-white);
    background: var(--color-gray-800);
}