/* ==========================================================================
   Susi design tokens and web fonts

   Shared by the interstitials styled to the Bitly sign up / sign in (susi)
   design language - currently susi_base.css, oauth_allow.css and
   saml_sign_in_error.css.

   Linked from each page template rather than @import-ed from those files:
   there is no build pipeline here, and an @import cannot be discovered until
   the importing sheet has itself been fetched and parsed, which would add a
   serialized round trip to a render-blocking resource on a signed-out page.

   Every value below is the corresponding token from bitly_common_components
   (src/constants/color.ts, src/constants/theme.ts), named in the comment so
   the two can be checked against each other.
   ========================================================================== */

:root {
  --font-family: "Bitly Display", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --page-bg: #f4f6fa; /* gray010 - background.base.primary1 */
  --card-bg: #ffffff; /* gray000 - background.base.primary0 */

  --text: #273144; /* gray090 - foreground.base.primary0 */
  --text-subtle: #3a4863; /* gray080 */

  --link: #2a5bd7; /* blue040 */
  --link-hover: #0c3ebb; /* blue050 */
  --link-active: #022d94; /* blue060 */

  --primary: #2a5bd7; /* blue040 */
  --primary-hover: #0c3ebb; /* blue050 */

  --error: #de3121; /* red040 - foreground.error.primary0 */

  --border: #dbe0eb; /* gray030 - border.neutral */
  --border-hover: #c3cbdc; /* gray040 - border.neutralHover */
  --focus: #9db8f8; /* blue020 - outline.focus */

  --radius: 4px; /* border.radius */
  --shadow: 0 1px 4px 0 rgba(21, 27, 38, 0.12); /* elevation.e200 */
}

/* --- Web fonts ----------------------------------------------------------- */
/* Only the three weights these pages use are served. Note that Medium (500)
   is deliberately absent: the susi components ask for 500 on button labels,
   but requesting a weight with no matching face here would silently fall back
   to Regular, so the page stylesheets ask for 600 instead. */
@font-face {
  font-family: "Bitly Display";
  font-weight: 400;
  font-display: swap;
  src: url("https://d1ayxb9ooonjts.cloudfront.net/bitly2/F2428715CE22F568DF1D452B7B199E95CA6CC06A.otf");
}
@font-face {
  font-family: "Bitly Display";
  font-weight: 600;
  font-display: swap;
  src: url("https://d1ayxb9ooonjts.cloudfront.net/bitly2/ED5EAB0191A62F2ABEFB000C604A240DDFB60AF4.otf");
}
@font-face {
  font-family: "Bitly Display";
  font-weight: 700;
  font-display: swap;
  src: url("https://d1ayxb9ooonjts.cloudfront.net/bitly2/97DF49EBFFC8E2DAB2B5B431DB3BE067008B38A5.otf");
}