/* ==========================================================================
   tokens.css — design tokens extracted from computed styles of the BofA
   sign-in page (file:///Users/usuario/Desktop/bofa/index.html)
   Site: bofa-signin-95464592 / page: root-8a5edab2
   ========================================================================== */

/* Self-hosted fonts (downloaded from the original CDN, woff2).
   NOTE: the original @font-face blocks declare these weight values —
   keep them identical so family+weight resolution matches the source:
   cnx-regular:300, roboto-regular:300, roboto-medium:300, cnx-bold:700, roboto-bold:700 */
@font-face {
  font-family: 'cnx-regular';
  src: url('../assets/fonts/cnx-regular.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'cnx-bold';
  src: url('../assets/fonts/cnx-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'roboto-regular';
  src: url('../assets/fonts/roboto-regular.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'roboto-medium';
  src: url('../assets/fonts/roboto-medium.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'roboto-bold';
  src: url('../assets/fonts/roboto-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- colors ---- */
  --color-black: #000000;            /* primary text */
  --color-text-secondary: #333333;
  --color-grey: #646464;             /* labels, footer legal text, borders */
  --color-link: #0053C2;             /* links / input focus */
  --color-navy: #012169;             /* primary buttons, footer wrapper */
  --color-red: #C41230;              /* card top strip, errors */
  --color-white: #FFFFFF;
  --color-grey-bg: #F5F5F5;          /* FDIC bar, footer disclosures, page nest */
  --color-border-light: #D5D5D5;     /* footer separator */
  --color-close-grey: #565656;       /* banner close X */
  --color-ot-green: #346E4A;         /* OneTrust primary buttons (Save Settings) */
  --color-ot-green-bg: #F9FFFA;      /* OneTrust opt-out signal bg */
  --color-gold: #5D4709;             /* rare accent */
  --color-brown: #6B5E51;            /* social header default */
  --color-backdrop: rgba(0, 0, 0, 0.5);   /* modal backdrop (OneTrust) */
  --color-backdrop-soft: rgba(0, 0, 0, 0.32);

  /* ---- typography ---- */
  --font-body: 'roboto-regular', Arial, 'Helvetica Neue', Helvetica, Roboto, sans-serif;
  --font-medium: 'roboto-medium', Arial, Helvetica, sans-serif;
  --font-bold: 'roboto-bold', Arial, Helvetica, sans-serif;
  --font-brand: 'cnx-regular', Arial, Helvetica, sans-serif;
  --font-brand-bold: 'cnx-bold', Arial, Helvetica, sans-serif;

  --fs-12: 12px;   /* FDIC preamble */
  --fs-14: 14px;   /* labels, links, legal */
  --fs-16: 16px;   /* body */
  --fs-20: 20px;   /* buttons, ad heading */
  --fs-28: 28px;   /* h1 mobile */
  --fs-36: 36px;   /* h1 desktop */

  --lh-tight: 16px;
  --lh-label: 20px;
  --lh-banner: 21px;
  --lh-legal: 22.4px;
  --lh-body: 24px;
  --lh-28: 28px;
  --lh-h1: 44px;

  /* ---- spacing ---- */
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-36: 36px;
  --sp-44: 44px;
  --sp-64: 64px;

  /* ---- radii ---- */
  --radius-checkbox: 2px;
  --radius-input: 4px;
  --radius-card: 12px;
  --radius-btn-mobile: 16px;
  --radius-btn: 22px;

  /* ---- shadows ---- */
  --shadow-card: 0 2px 20px 0 rgba(0, 0, 0, 0.12);
  --shadow-banner: 0 0 18px 0 rgba(0, 0, 0, 0.2);
  --shadow-modal: 0 0 18px 0 rgba(0, 0, 0, 0.2);

  /* ---- layout ---- */
  --page-max: 1440px;
  --card-w-desktop: 330px;
  --card-w-narrow: 343px;   /* used < 1025px */
  --gutter: 8px;

  /* ---- z-index ---- */
  --z-banner: 2147483645;
  --z-backdrop: 2147483646;
  --z-modal: 2147483647;
  --z-skiplink: 3333;

  /* ---- breakpoints (CSS vars can't be used in media queries — use literal px) ----
     --bp-smallMid: 375px
     --bp-smallPlus: 414px
     --bp-medium: 768px     (main layout switch)
     --bp-large: 1025px     (card width switch 343 -> 330)
     --bp-xlarge: 1296px
     --bp-xxlarge: 1440px
  */
}