/*
 * Workforce Edge colour and font tokens, linked from head.html and 404.html.
 * Structural tokens (sizes, spacing, layout) live in styles/styles.css.
 */

/*
 * Fallback faces sized like the Typekit fonts (loaded lazily by scripts/head/adobe-typekit.js),
 * so text keeps its line breaks and height when New Frank and Mislab arrive. Each weight maps to
 * the matching Arial face; 500 falls back to 400 and 600 to 700 by normal font matching.
 * Metrics measured in Chrome against the kit (see the perf(fonts) commit); re-measure if the kit changes.
 */
@font-face {
  font-family: new-frank-fallback;
  font-weight: 400;
  src: local("Arial"), local("ArialMT");
  size-adjust: 105.05%;
  ascent-override: 96.72%;
  descent-override: 25.23%;
  line-gap-override: 0%;
}

@font-face {
  font-family: new-frank-fallback;
  font-weight: 700;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 100.65%;
  ascent-override: 100.94%;
  descent-override: 26.33%;
  line-gap-override: 0%;
}

@font-face {
  font-family: mislab-std-fallback;
  font-weight: 400;
  src: local("Arial"), local("ArialMT");
  size-adjust: 102.55%;
  ascent-override: 81.71%;
  descent-override: 19.5%;
  line-gap-override: 0%;
}

@font-face {
  font-family: mislab-std-fallback;
  font-weight: 700;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 99.5%;
  ascent-override: 84.22%;
  descent-override: 20.1%;
  line-gap-override: 0%;
}

:root {
  /* color palette — raw brand values; define each hex once here, reference via var() below */
  --color-white: #fdfdfd;
  --color-gray-lightest: #f8f8f8;
  --color-gray-light: #efefef;
  --color-gray-medium: #d7d8d6;
  --color-gray-dark: #3f4246;
  --color-black: #000;
  --color-brand: #f04f24;
  --color-brand-dark: #b83b19;
  --color-navy: #162c46;
  --color-link: #104b91;
  --color-section-blue: #bfe0f4;
  --color-section-orange: #f47b5b;
  --color-card-link: #4297cb;

  /* colors */
  --background-color: var(--color-white);
  --light-color: var(--color-gray-lightest);
  --text-color: var(--color-black);
  --brand-color: var(--color-brand);
  --link-color: var(--color-link);
  --link-hover-color: var(--link-color);
  --button-background-color: var(--brand-color);
  --button-secondary-background-color: var(--link-color);
  --button-text-color: var(--background-color);
  --nav-link-click-color: var(--color-black);
  --nav-cta-color: var(--brand-color);
  --nav-cta-hover-color: var(--color-brand-dark);
  --nav-cta-secondary-hover-color: var(--color-gray-medium);
  --nav-link-hover-border: var(--brand-color);
  --nav-sections-background-color: var(--color-gray-light);
  --footer-background-color: var(--color-black);
  --footer-text-color: var(--color-white);
  --blockquote-text-color: var(--color-gray-dark);
  --blockquote-border-color: var(--color-brand-dark);
  --section-bg-gray: var(--color-gray-light);
  --section-bg-dark-gray: var(--color-gray-medium);
  --section-bg-blue: var(--color-section-blue);
  --section-bg-orange: var(--color-section-orange);
  --accordion-border-color: var(--color-gray-light);
  --accordion-text-color: var(--color-gray-dark);
  --content-card-heading-color: var(--color-gray-dark);
  --content-card-link-color: var(--color-card-link);
  --content-card-shadow-color: rgb(141 151 158 / 20%);
  --heading-accent-color: var(--color-navy);
  --hero-text-color: var(--color-gray-dark);

  /* fonts */
  --font-family-mislab: "mislab-std", mislab-std-fallback, sans-serif;
  --font-family-new-frank: "new-frank", new-frank-fallback, arial, sans-serif;
  --heading-font-family: var(--font-family-mislab);
  --body-font-family: var(--font-family-new-frank);
}