/* =============================================================================
   atta design tokens

   GENERATED FROM DESIGN.md -- do not edit by hand.
   Source:  git@ssh.dev.azure.com:v3/BBLCloud/ssi/atta-design
   Commit:  17af70980fe3    Version: 1.0.0
   Edits here are overwritten by the next publish -- change the source repo.

   PATHS: url() in CSS resolves relative to THIS FILE, not to the HTML that
   links it. The paths below assume tokens.css sits alongside an assets/
   directory. Move the file into a css/ subfolder and they become ../assets/.

   USAGE:
     <link rel="stylesheet" href="./tokens.css">

   Then any snippet from DESIGN.md works unchanged, e.g.
     .btn { background: var(--colors-primary); border-radius: var(--radius-md); }

   Only weights 400 and 500 exist. Set font-synthesis: none on your root element
   so a stray font-weight: 700 fails visibly rather than smearing the Medium cut.
   ============================================================================= */

/* --- Brand faces --- */

@font-face {
  font-family: 'BBL Sans Office';
  src: url('./assets/fonts/BBLSansOffice-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'BBL Sans Office';
  src: url('./assets/fonts/BBLSansOffice-RegularItalic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'BBL Sans Office';
  src: url('./assets/fonts/BBLSansOffice-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'BBL Sans Office';
  src: url('./assets/fonts/BBLSansOffice-MediumItalic.woff2') format('woff2');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'BBL Sans Looped Office';
  src: url('./assets/fonts/BBLSansLoopedOffice-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'BBL Sans Looped Office';
  src: url('./assets/fonts/BBLSansLoopedOffice-RegularItalic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'BBL Sans Looped Office';
  src: url('./assets/fonts/BBLSansLoopedOffice-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'BBL Sans Looped Office';
  src: url('./assets/fonts/BBLSansLoopedOffice-MediumItalic.woff2') format('woff2');
  font-weight: 500; font-style: italic; font-display: swap;
}

/* --- Tokens --- */

:root {
  /* colors */
  --colors-primary: #002850;
  --colors-primary-hover: #003870;
  --colors-primary-active: #001c38;
  --colors-primary-disabled-bg: #dce0e5;
  --colors-primary-disabled-text: #9ca3ab;
  --colors-secondary: #0064ff;
  --colors-secondary-hover: #0056e6;
  --colors-secondary-active: #004cc2;
  --colors-secondary-subtle: #e5f0ff;
  --colors-background: #ffffff;
  --colors-background-muted: #f5f7fa;
  --colors-background-dark: #002850;
  --colors-text-primary: #424c57;
  --colors-text-dark: #000000;
  --colors-text-secondary: #606b76;
  --colors-text-inverse: #ffffff;
  --colors-text-link: #0064ff;
  --colors-text-link-hover: #0056e6;
  --colors-text-input-focus: #2b333b;
  --colors-border-light: #dce0e5;
  --colors-accent-blue-light: #70a8ff;
  --colors-accent-navy-light: #004c99;
  --colors-logo-navy: #002850;
  --colors-logo-blue: #0064ff;
  --colors-logo-black: #000000;
  --colors-logo-white: #ffffff;
  --colors-icon-default: #0064ff;
  --colors-endorsement-mark: #0064ff;
  --colors-endorsement-wordmark: #000000;
  /* font */
  --font-primary: 'BBL Sans Office', 'Helvetica Neue', Arial, sans-serif;
  --font-looped: 'BBL Sans Looped Office', 'BBL Sans Office', sans-serif;
  --font-mono: monospace;
  /* typography */
  --typography-display-size: 90px;
  --typography-display-weight: 500;
  --typography-display-line-height: 1.2;
  --typography-heading-xl-size: 62px;
  --typography-heading-xl-weight: 500;
  --typography-heading-xl-line-height: 1.2;
  --typography-heading-lg-size: 48px;
  --typography-heading-lg-weight: 500;
  --typography-heading-lg-line-height: 1.2;
  --typography-heading-md-size: 32px;
  --typography-heading-md-weight: 500;
  --typography-heading-md-line-height: 1.2;
  --typography-body-size: 16px;
  --typography-body-weight: 400;
  --typography-body-line-height: 1.5;
  --typography-body-sm-size: 14px;
  --typography-body-sm-weight: 400;
  --typography-body-sm-line-height: 1.5;
  --typography-caption-size: 12px;
  --typography-caption-weight: 400;
  --typography-caption-line-height: 1.5;
  --typography-caption-xs-size: 9px;
  --typography-caption-xs-weight: 400;
  --typography-caption-xs-line-height: 1.5;
  --typography-code-size: 14px;
  --typography-code-weight: 400;
  --typography-code-line-height: 1.5;
  /* spacing -- scale-N == N x 4px base */
  --spacing-scale-0: 0px;
  --spacing-scale-1: 4px;
  --spacing-scale-2: 8px;
  --spacing-scale-3: 12px;
  --spacing-scale-4: 16px;
  --spacing-scale-5: 20px;
  --spacing-scale-6: 24px;
  --spacing-scale-8: 32px;
  --spacing-scale-10: 40px;
  --spacing-scale-12: 48px;
  /* radius */
  --radius-sm: 5px;
  --radius-md: 7px;
  --radius-lg: 16px;
  --radius-xl: 32px;
  --radius-full: 50%;
  /* elevation */
  --elevation-card: rgba(0, 40, 80, 0.08) 0px 2px 12px 0px;
  --elevation-card-hover: rgba(0, 40, 80, 0.12) 0px 4px 20px 0px;
  --elevation-overlay: rgba(0, 0, 0, 0.5) 0px 0px 1px 0px;
  --elevation-inset-shadow: rgb(255, 255, 255) 0px -110px 40px -50px inset;
  --elevation-z-negative: -1;
  --elevation-z-dropdown: 1;
  --elevation-z-slider-nav: 2;
  --elevation-z-flag-icon: 3;
  --elevation-z-search-icon: 9;
  --elevation-z-cookie-banner: 10;
  --elevation-z-header: 11;
  --elevation-z-mega-menu: 20;
  /* motion */
  --motion-duration-fast: 0.15s;
  --motion-duration-base: 0.3s;
  --motion-duration-medium: 0.5s;
  --motion-easing-standard: ease-in-out;
  --motion-easing-out: ease-out;
  /* layout -- breakpoints are in tokens.json only -- a var() cannot be used in @media */
  --layout-max-width: 1200px;
}