/* ==========================================================================
   COLORS  (reusable variables: use as var(--fin-orange), etc.)
   ========================================================================== */

:root{
  --fin-orange: #FF5600;
  --fin-light-orange: #FF9A66;
  --off-white: #FAF9F6;
  --off-black: #111111;
  --off-white-card: #F0EDE8;
  --off-white-swoosh: #F7F6F2;
}

/* ==========================================================================
   BACKGROUND COLOR
   ========================================================================== */

#fin-1up-blade {
	background-color: var(--off-white)
}

/* ==========================================================================
   HEADINGS
   ========================================================================== */

/* Headings: the site sets heading colors with many class-based rules (e.g. .marquee--blade .headline),
   so !important is needed to override them all */
#fin-1up-blade h1,
#fin-1up-blade h2,
#fin-1up-blade h3,
#fin-1up-blade h4,
#fin-1up-blade h5,
#fin-1up-blade h6,
#fin-1up-blade .headline {
  color: var(--off-black) !important;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */


#fin-1up-blade a.cta_button[data-variant="primary"],
#fin-1up-blade a.cta_button[data-variant="primary"]:hover,
#fin-1up-blade a.cta_button[data-variant="primary"]:focus,
#fin-1up-blade a.cta_button[data-variant="primary"]:active{
  --sds-c-button-color-background: var(--off-black);
  --sds-c-button-color-border: var(--off-black);
  --sds-c-button-text-color: #FFFFFF;
  --sds-c-button-color-background-hover: var(--fin-orange);
  --sds-c-button-color-border-hover: var(--fin-orange);
  --sds-c-button-text-color-hover: #FFFFFF;
  --sds-c-button-color-background-focus: var(--off-black);
  --sds-c-button-color-border-focus: var(--off-black);
  --sds-c-button-text-color-focus: #FFFFFF;
  --sds-c-button-color-background-active: var(--off-black);
  --sds-c-button-color-border-active: var(--off-black);
  --sds-c-button-text-color-active: #FFFFFF;
}

/* Buttons: secondary = off-black stroke, off-black text, no fill */
#fin-1up-blade a.cta_button[data-variant="secondary"],
#fin-1up-blade a.cta_button[data-variant="secondary"]:hover,
#fin-1up-blade a.cta_button[data-variant="secondary"]:focus,
#fin-1up-blade a.cta_button[data-variant="secondary"]:active{
  --sds-c-button-color-background: transparent;
  --sds-c-button-color-border: var(--off-black);
  --sds-c-button-text-color: var(--off-black);
  --sds-c-button-color-background-focus: transparent;
  --sds-c-button-color-border-focus: var(--off-black);
  --sds-c-button-text-color-focus: var(--off-black);
  --sds-c-button-color-background-active: transparent;
  --sds-c-button-color-border-active: var(--off-black);
  --sds-c-button-text-color-active: var(--off-black);
}

/* Buttons: secondary hover fills with off-black and flips the text to white */
#fin-1up-blade a.cta_button[data-variant="secondary"]:hover{
  --sds-c-button-color-background-hover: var(--off-black);
  --sds-c-button-color-border-hover: var(--off-black);
  --sds-c-button-text-color-hover: #FFFFFF;
}

/* Buttons: remove the white streak on the primary button's edge
   The site draws a white-to-transparent gradient border with an :after (--pbc-g-button-outline-gradient),
   which shows as a light streak on the right side of the off-black button. */
#fin-1up-blade a.cta_button[data-variant="primary"]:after{
  content: none;
}


/* Buttons: focus / click ring in off-black instead of the site's blue
   The page's ".version--two" styles draw it as "outline: 3px solid var(--pbc-focus-state-color)",
   so the color is changed at its source (the variable) for buttons. */
#fin-1up-blade a.cta_button,
#fin-1up-blade a.cta_button:focus,
#fin-1up-blade a.cta_button:active{
  --pbc-focus-state-color: var(--off-black);
  --sds-c-button-outline-color: var(--off-black);
  --sds-c-button-outline-color-active: var(--off-black);
}