/* Tri-Cities AI Lab design tokens (homepage-v2).
 *
 * The only colors, type, space and shape values the site uses. site.css and
 * every template read these variables; nothing else should hard-code a hex.
 * The block at the bottom maps the pre-v2 variable names onto the new
 * palette so older page styles pick it up until they are rewritten. */

/* Source Serif 4, 600 only (display). Latin subset, OFL. */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/source-serif-4-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Public Sans, variable weight. Latin subset, OFL. */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/public-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Size-matched fallbacks, so the swap to the web font does not reflow text.
 * Serif values come from Source Serif 4 600's letter-frequency-weighted
 * average advance width against each local face; the declared weight is 600
 * so browsers use the regular local face as-is instead of synthesizing bold. */
@font-face { font-family: 'Serif Fallback G'; font-weight: 600; src: local('Georgia'); size-adjust: 108.12%; ascent-override: 95.82%; descent-override: 30.98%; line-gap-override: 0%; }
@font-face { font-family: 'Serif Fallback N'; font-weight: 600; src: local('Noto Serif'), local('NotoSerif-Regular'); size-adjust: 100.75%; ascent-override: 102.83%; descent-override: 33.25%; line-gap-override: 0%; }
@font-face { font-family: 'Serif Fallback D'; font-weight: 600; src: local('DejaVu Serif'), local('DejaVuSerif'); size-adjust: 94.20%; ascent-override: 109.98%; descent-override: 35.56%; line-gap-override: 0%; }
@font-face { font-family: 'Public Sans Fallback A'; src: local('Arial'), local('ArialMT'), local('Arimo'), local('Liberation Sans'); size-adjust: 104.78%; ascent-override: 90.67%; descent-override: 21.47%; line-gap-override: 0%; }
@font-face { font-family: 'Public Sans Fallback R'; src: local('Roboto'), local('Roboto-Regular'); size-adjust: 105.02%; ascent-override: 90.46%; descent-override: 21.42%; line-gap-override: 0%; }
@font-face { font-family: 'Public Sans Fallback D'; src: local('DejaVu Sans'), local('DejaVuSans'); size-adjust: 92%; ascent-override: 103.26%; descent-override: 24.46%; line-gap-override: 0%; }

:root {
  /* Color */
  --navy: #143049;
  --navy-deep: #0E2438;
  --navy-raised: #2A4E6E;
  --on-navy: #D3DEE8;
  --on-navy-muted: #B9CAD8;
  --teal: #0E7490;
  --teal-text: #0E6680;
  --teal-tint: #E2F0F2;
  --teal-on-navy: #6FC6D6;
  --ink: #10232F;
  --body: #22333E;
  --muted: #44545F;
  --line: #DCE4E4;
  --line-strong: #BFCBCC;
  --mist: #E9EFEE;
  --paper: #FAFBFA;
  --ochre-tint: #F5EBD8;
  --ochre-text: #7A4808;
  --white: #FFFFFF;
  --honest-border: #8FA3A6;

  /* Type */
  --font-serif: 'Source Serif 4', 'Serif Fallback G', 'Serif Fallback N', 'Serif Fallback D', Georgia, serif;
  --font-sans: 'Public Sans', 'Public Sans Fallback A', 'Public Sans Fallback R', 'Public Sans Fallback D', system-ui, sans-serif;
  /* Fluid sizes, 360px to 1440px wide */
  --fs-h1: clamp(2.125rem, 1.5417rem + 2.5926vw, 3.875rem);
  --fs-h2: clamp(1.625rem, 1.4167rem + 0.9259vw, 2.25rem);
  --fs-h3: clamp(1.25rem, 1.1667rem + 0.3704vw, 1.5rem);
  --fs-body: clamp(1rem, 0.9792rem + 0.0926vw, 1.0625rem);
  --fs-article: 1.125rem;
  --fs-small: 0.875rem;
  --fs-tiny: 0.8125rem;
  --lh-body: 1.55;
  --lh-tight: 1.15;
  --measure: 68ch;

  /* Space: 4px base */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px;
  --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px;
  --gutter: 16px;
  --section-y: 36px;
  --wrap-max: 1200px;

  /* Shape */
  --r-control: 10px;
  --r-card: 14px;
  --r-pill: 999px;
  --shadow-card: 0 18px 40px rgba(20, 48, 73, 0.12);
  --tap: 44px;
  --focus: 3px solid var(--teal);

  /* Mobile action bar height, used to pad the page so it never covers content */
  --action-bar-h: 64px;
}
@media (min-width: 768px) {
  :root { --gutter: 32px; --section-y: 72px; }
}
@media (min-width: 1200px) {
  :root { --gutter: 48px; --section-y: 96px; }
}

/* Pre-v2 names used by older page styles. Mapped onto the new palette. */
:root {
  --teal-light: var(--teal-on-navy);
  --cream: var(--mist);
  --cream-warm: var(--line);
  --ink-soft: var(--body);
}