/* ═══════════════════════════════════════════════════════════════
   epa · shared design tokens
   ───────────────────────────────────────────────────────────────
   One source of truth for every page: the self-hosted Circular
   face, the brand color palette, and the type sizes reused across
   more than one page or more than one role. Linked by index.html,
   privacy.html and terms.html — none of them should redefine
   @font-face or these custom properties locally.

   Page-unique display sizes (a page's own hero/section headline
   scale) stay local to the page that owns them; only genuinely
   shared values live here.
═══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Circular';
  src: url('fonts/lineto-circular-book.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Circular';
  src: url('fonts/lineto-circular-bookItalic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Circular';
  src: url('fonts/lineto-circular-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Circular';
  src: url('fonts/lineto-circular-mediumItalic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Circular';
  src: url('fonts/lineto-circular-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Circular';
  src: url('fonts/lineto-circular-boldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Circular';
  src: url('fonts/lineto-circular-black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Circular';
  src: url('fonts/lineto-circular-blackItalic.woff2') format('woff2');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ─── Color ─────────────────────────────────────────────────── */
  --paper:       #F4EFE6;
  --desk:        #E3DCCC;
  --ink:         #211C18;
  --wine:        #6B2436;
  --wine-hover:  #7C2B40;
  --hero-dark:   #171009;

  /* ─── Font family ───────────────────────────────────────────────
     Circular is the one and only typeface. `--serif` is a
     historical name (the site used a real serif, Newsreader,
     before Circular replaced it everywhere) kept so existing
     selectors didn't need renaming when the swap happened. */
  --serif: 'Circular', Georgia, serif;
  --sans:  'Circular', -apple-system, 'SF Pro Text', system-ui, 'Helvetica Neue', Arial, sans-serif;
  /* Deliberate exception, not a leak: this styles the fake address
     bar inside a browser-chrome screenshot mockup, so it borrows
     the OS/browser's own monospace stack on purpose — it's
     depicting real browser UI, not EPA-owned content. */
  --mono:  ui-monospace, Menlo, monospace;

  /* ─── Shared type scale ───────────────────────────────────────
     Sizes reused across more than one page or more than one role.
     Each page's own unique display sizes (hero/cta headline etc.)
     stay defined locally in that page's own stylesheet. */
  --fs-eyebrow:  11px;  /* uppercase, tracked micro-labels */
  --fs-caption:  14px;  /* small print — timestamps, "last updated" */
  --fs-body:     16px;  /* default reading size */
  --fs-body-lg:  17px;  /* slightly larger body copy */
}