/*!
 * Zehao Xue — global design tokens.
 * Single source of truth for the site palette + type. Loaded at the root and
 * shared down into every page (hub, /resume, future /photo) so colors and
 * fonts stay consistent everywhere. Change a value here, it changes site-wide.
 */
/* ===== Self-hosted web fonts (OFL) — no third-party request at paint time.
   Preload the two above-the-fold files (saira-700, muli-var) from each page. ===== */
@font-face {
  font-family: 'Saira Extra Condensed'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/saira-extra-condensed-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Saira Extra Condensed'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/saira-extra-condensed-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Muli'; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url('../fonts/muli-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Muli'; font-style: italic; font-weight: 200 1000; font-display: swap;
  src: url('../fonts/muli-var-italic.woff2') format('woff2');
}

:root {
  /* ===== Palette ===== */
  --sage: #acb6a6;        /* primary accent */
  --sage-dark: #596057;   /* muted green-gray — links / secondary text */
  --green-deep: #172b17;  /* near-black green — headers / strong text */
  --green-head: #3D5346;  /* headings */
  --green-mid: #435b4d;
  --green-light: #4f6f57;
  --slate: #495057;       /* dark neutral — social icon backgrounds */
  --ink: #343a40;         /* default heading ink */
  --muted: #868e96;       /* body / muted text */

  /* ===== Surfaces ===== */
  --bg: #ffffff;
  --bg-soft: #f4f5f2;
  --line: #e3e6df;

  /* ===== Type ===== */
  --head-font: 'Saira Extra Condensed', 'Arial Narrow', 'Roboto Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --body-font: 'Muli', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}