:root {
  --spacing: 0.25rem;
  --spacing-1: calc(var(--spacing) * 1);    /* 0.25rem | 4px */
  --spacing-2: calc(var(--spacing) * 2);    /* 0.5rem | 8px */
  --spacing-3: calc(var(--spacing) * 3);    /* 0.75rem | 12px */
  --spacing-4: calc(var(--spacing) * 4);    /* 1rem | 16px */
  --spacing-6: calc(var(--spacing) * 6);    /* 1.5rem | 24px */
  --spacing-8: calc(var(--spacing) * 8);    /* 2rem | 32px */
  --spacing-10: calc(var(--spacing) * 10);  /* 2.5rem | 40px */
  --spacing-15: calc(var(--spacing) * 15);  /* 3.75rem | 60px */
  --spacing-16: calc(var(--spacing) * 16);  /* 4rem | 64px */
  --spacing-20: calc(var(--spacing) * 20);  /* 5rem | 80px */
  --spacing-30: calc(var(--spacing) * 30);  /* 7.5rem | 120px */
  --spacing-60: calc(var(--spacing) * 60);  /* 15rem | 240px */

  --spacing-xxsm: var(--spacing-1);
  --spacing-sxm: var(--spacing-2);
  --spacing-sm: var(--spacing-4);
  --spacing-md1: var(--spacing-6);
  --spacing-md2: var(--spacing-8);
  --spacing-lg: var(--spacing-10);
  --spacing-xlg: var(--spacing-16);
  --spacing-xxlg: var(--spacing-20);
  --spacing-xxxlg: var(--spacing-30);
  --spacing-xxxxlg: var(--spacing-60);

  --primary: var(--skymiles-journal-page);
  --secondary: var(--white);
  --reverse: var(--dark-blue);
  --reverse-secondary: var(--delta-blue);
  --accent: var(--canyon-orange);
  --accent-reverse: var(--canyon-orange);
  --primary: var(--reserve-shade1);
  --secondary: var(--delta-blue);
  --subtle: #FFFFFF0D;
  --reverse: var(--skymiles-journal-page);
  --reverse-secondary: var(--reserve-shade4);
  --accent: var(--canyon-orange);
  --cta: var(--canyon-orange);
  --strong: var(--skymiles-journal-page);
  --subtle: var(--delta-blue);
  --reverse: var(--dark-blue);
  --reverse-subtle: var(--light-blue);
  --accent: var(--canyon-orange);
  --accent-reverse: var(--canyon-orange);

  --dark-blue: #0b253f;
  --skymiles-journal-page: #e3dcd2;
  --delta-blue: #003366;
  --delta-dark-red: #991933;
  --light-blue: #d1e7f2;
  --evergreen: #437e75;
  --canyon-orange: #c0402c;
  --gold-transit: #e1bd75;
  --reserve-shade1: #0b1b23;
  --reserve-shade2: #304246;
  --reserve-shade3: #42535d;
  --reserve-shade4: #788ea0;
  --platinum-shade1: #404040;
  --platinum-shade2: #6f7374;
  --platinum-shade3: #bec2c3;
  --platinum-shade4: #f6f8f9;
  --gold-shade1: #644919;
  --gold-shade2: #91723a;
  --gold-shade3: #cab078;
  --gold-shade4: #ffebb7;
  --blue-shade1: #204074;
  --blue-blue-shade2: #0b5ea2;
  --blue-blue-shade3: #0176b8;
  --blue-shade4: #61a2d5;
  --amex-white: #ffffff;
  --amex-blue: #006fcf;
  --amex-darkblue: #00175a;
  --amex-darkgrey: #333333;

  --font-primary: 'Whitney', sans-serif;
	--font-secondary: 'WhitneyCondense', sans-serif;
	--font-primary-amex: 'BentonSans', 'Helvetica Neue', Helvetica, sans-serif;
	--font-weight-default: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--vertical-space: clamp(50px, 4.5vw, 80px);
	--width-lg: 2730px;

  --amex-onenav-height: 64px;
  --card-nav-height: 56px;
  /* Figma color tokens */

  --color-Primary-Delta-Blue: #003366;
  --color-Primary-Dark-Blue: #0B253F;
  --color-Primary-SkyMiles-Journal: #E3DCD2;
  --color-Primary-Light-Blue: #D1E7F2;

  --color-Secondary-Canyon-Orange: #C0402C;
  --text-icon-primary: var(--amex-darkgrey);
  --text-icon-secondary: var(--color-Primary-Dark-Blue);
  --text-icon-reverse: var(--color-Primary-SkyMiles-Journal);
  --text-icon-reverse-secondary: var(--amex-white);
  --text-icon-accent: var(--evergreen);
  --text-icon-accent-reverse: var(--evergreen);

  --surface-primary: var(--color-Primary-SkyMiles-Journal);
  --surface-secondary: var(--platinum-shade3);
  --surface-subtle: #EAE5DD;
  --surface-reverse: var(--color-Primary-Dark-Blue);
  --surface-reverse-secondary: var(--platinum-shade2);
  --surface-accent: var(--evergreen);
  --surface-cta: var(--color-Primary-Dark-Blue);

  --stroke-strong: var(--color-Primary-Dark-Blue);
  --stroke-subtle: var(--platinum-shade3);
  --stroke-reverse: var(--color-Primary-SkyMiles-Journal);
  --stroke-reverse-subtle: var(--platinum-shade1);
  --stroke-accent: var(--evergreen);
  --stroke-accent-reverse: var(--evergreen);

  --gradient-primary: linear-gradient(180deg, #E3DCD2 68.26%, #BEC2C3 96.75%);
}
body {
  color: var(--text-icon-primary);
}
/* Navigation */


/* components */
  /* c-cn */
  .c-cn {
    background: var(--surface-reverse);
    color: var(--text-icon-reverse);
  }

  .c-cn__card {
    color: var(--text-icon-reverse);
  }

  .c-cn__nav-links {
    .nav-link {
      color: var(--text-icon-reverse);
    }
  }

  .c-cn__explore {
    .text {
      color: var(--text-icon-reverse);
    }
  }

  .c-cn__explore-links {
    .explore-link:not(.explore-link-external) {
      color: var(--text-icon-primary);

      &:hover {
        color: var(--text-icon-secondary);
      }
    }
  }
  

  /* c-hero */
  .c-hero__bg {
    @media (width >= 768px) {
      width: 50vw;
      margin-left: auto;
    }
  }


  /* c-pagehero */
  .c-pagehero__bg {
    &::before {
      background: linear-gradient(0deg, #E3DCD2 0%, rgba(227, 220, 210, 0.00) 78.48%);
      content: '';
      position: absolute;
      inset: 0;
    }

    &::after {
      background: linear-gradient(76deg, #E3DCD2 39.47%, rgba(227, 220, 210, 0.00) 79.85%);
      content: '';
      position: absolute;
      inset: 0;
      opacity: 0.75;
    }
  }

  /* .c-benefitsCta */
  .c-benefitsCta__inner {
    border: none;
    background: var(--surface-reverse);
    color: var(--text-icon-reverse);
  }

  .c-benefitsCta__content {
    color: var(--text-icon-reverse);

    .h2 {
      color: inherit;
    }
  }

  /* c-cta-banner  */
  .c-cta-banner {
    background-color: var(--surface-reverse);
    color: var(--text-icon-reverse);

    .h2 {
      color: var(--text-icon-reverse-secondary);
    }
  }


/* c-banner3__grid */
  .c-banner3__grid {
    background: var(--surface-reverse);
    color: var(--text-icon-reverse);

    .h2 {
      color: var(--text-icon-reverse-secondary);
    }
  }



  /* c-cta */
  .c-cta {
    border: 1px solid var(--stroke-accent-reverse);
    color: var(--text-icon-reverse-secondary);
  }
  /* c-cardmanagement */
  .c-cardmanagement__outer {
    background: var(--surface-secondary);
  }

  .c-cardmanagement__links {
    a {
      border-color: var(--stroke-reverse);

      &:hover {
        background: rgba(255, 255, 255, 0.2);
      }
    }
  }

  /* c-jump-nav */
  .c-jump-nav__outer {
    background: rgba(227, 220, 210, 0.50);
    border-bottom: 1px solid var(--stroke-reverse);
  }
  .c-jump-nav__ul {
    a,
    button {
      background: var(--surface-primary);
      
      &:focus-visible {
        outline-color: var(--amex-darkgrey);
      }

      &[aria-selected="true"],
      &:hover {
          background: var(--surface-cta);
          color: var(--text-icon-reverse);
      }
    }
  }

  /* c-card | .sup-flag */
  .c-card__footnote,
  .sup-flag {
    &::after {
      background: var(--text-icon-secondary);
    }
  }

  .c-card__footnote {
    background: var(--surface-primary);
  }

  .c-card {
    background: var(--surface-subtle);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08);
  }

  .c-card--reverse-bg {
    background: var(--surface-reverse);
    color: var(--text-icon-reverse);
  }


  /* c-accelerator */
  .c-accelerator__heading {
    color: var(--text-icon-accent);
  }

  /* c-apps */
  .c-apps__group {
    .app-btns {
      a:focus-visible {
        outline-color: var(--text-icon-primary);
      }
    }
  }

  /* c-nam | Not a Member*/
  .c-nam {
    background: var(--surface-reverse);
    color: var(--text-icon-reverse);

    hr {
      background: var(--stroke-reverse-subtle);
    }
  }

    .c-nam__outer {
      background: var(--surface-secondary);
    }

    /* tab-accordion */
    .tab-item .tab-title:hover, 
    .tab-item .tab-title.is-active {
      border-left: 1px solid var(--text-icon-accent);
      background-color: var(--surface-subtle);
      
      @media (width < 1024px) {
        border-left: none;
        background-color: transparent;
      }
    }

  /* c-footer */
  body:not(.has-gradient-footer) .c-footer {
    background: var(--surface-primary);
  }

  .c-footer__nav {
    background-color: var(--amex-white);
    color: var(--text-icon-primary);
  }

.c-terms {
  color: var(--text-icon-secondary);
}

.c-appsmall__footer {
  a:focus-visible {
    outline-color: var(--amex-darkgrey);
  }
}