/*
  Design tokens for the whole site.

  This file has two jobs:
  1. Load the three self-hosted typefaces (@font-face blocks below).
  2. Declare every locked design value once, as a CSS custom property
     (the --name: value pairs on :root), so every other stylesheet
     reads var(--color-accent) etc. instead of typing a hex code or
     font name directly. If a value ever needs to change, it changes
     here once.

  Do not add new colors, fonts, or spacing scales to this file without
  checking CLAUDE.md's "Design tokens" section first: these values are
  locked, not a starting point to restyle from.
*/

/* ==========================================================================
   Fonts, self-hosted.

   Font files live in ../fonts/<family>/. They are downloaded once from
   Google Fonts' own site (fonts.google.com), not loaded from the Google
   Fonts CDN at runtime: a CDN request would send every visitor's IP to
   Google on every page view, which this project avoids. To add a new
   weight later: download the matching woff2 from fonts.google.com,
   drop it in the right folder below, and copy one of these blocks with
   the new font-weight value and file name.
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/archivo/archivo-400.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/archivo/archivo-500.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/archivo/archivo-600.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/archivo/archivo-700.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono/ibm-plex-mono-500.woff2") format("woff2");
}

@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/newsreader/newsreader-italic-300.woff2") format("woff2");
}

/* ==========================================================================
   Tokens
   ========================================================================== */

:root {
  /* Colors. #0E42D8 is the only correct accent value: if you ever see
     #1B4CD8 anywhere in this project, it is a leftover from before the
     sitewide color correction and should be fixed, not reused. */
  --color-bg: #ffffff;
  --color-title: #14181f; /* headings, titles */
  --color-body: #2b3038; /* body copy */
  --color-muted: #6e7480; /* subtitles, captions, secondary text */
  --color-line: #000000; /* structural divider lines: thin, solid, never faded */
  --color-accent: #0e42d8;

  /* Fonts. Use these variables in font-family, never the bare font name,
     so a future font swap only touches this file. */
  --font-base: "Archivo", sans-serif;
  --font-label: "IBM Plex Mono", monospace;
  --font-pullquote: "Newsreader", serif; /* always paired with font-style: italic where used */

  /* Fixed-width canvas. Every page's content sits centered in this width;
     on wider screens the leftover space shows --color-bg only, content
     never stretches. --canvas-padding is the side padding on the content
     within the canvas. Checked against reference/screenshots/eif.png
     when the EIF case page was built: the wordmark, eyebrow, and nav
     all sit at x=120/x=1318 on the 1440px canvas, confirming 120px. */
  --canvas-width: 1440px;
  --canvas-padding: 120px;
}

/* Breakpoint note: the site uses a single breakpoint, 768px, sitewide,
   no exceptions (see CLAUDE.md). CSS custom properties cannot be used
   inside an @media condition, so there is no --breakpoint token: every
   media query in this codebase must write the literal value `768px`
   directly, as below. */
@media (max-width: 767px) {
  :root {
    --canvas-padding: 24px;
  }
}