/* THE SITE'S TOKENS (marketing website, Phase 8; brief §15.5).

   The SHARED colours are copies of the app's src/styles/theme.css values,
   under the same names. The site does not import the app's file at runtime
   (it is its own Cloudflare Pages project with no build), so
   scripts/check-site-tokens.mjs compares every shared name with theme.css and
   fails if one drifts.

   Below them, the site-only values (Phase 0 answer B13): a darker link colour,
   its hover, a divider for the context ground, and the marketing type scale.
   The app keeps its own seven type roles; these exist only here. */

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/fonts/IBMPlexSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/fonts/IBMPlexSans-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/fonts/IBMPlexSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Shared with theme.css (checked by scripts/check-site-tokens.mjs). */
  --brand: #0062ee;
  --brand-hover: #0050c4;
  --on-brand: #ffffff;
  --brand-tint: #eaf3ff;
  --ink: #1b2230;
  --muted: #566072;
  --control: #7d8698;
  --hairline: #e3e7ee;
  --paper: #ffffff;
  --context: #f4f6f9;
  --attention: #9a4a2b;
  --attention-tint: #f8ece6;
  --warning-ink: #7a5200;
  --warning-tint: #fbf1d9;

  /* Site only (B13). */
  --site-link: #0050c4;          /* link text: 7.1:1 on paper, 6.6:1 on context */
  --site-link-hover: #003e99;
  --site-divider-context: #d5dae2; /* a rule that still shows on --context */
  --site-rule-on-brand: rgba(255, 255, 255, 0.35);
  --site-shadow-window: 0 4px 16px rgba(27, 34, 48, 0.08);
  --site-shadow-window-strong: 0 4px 16px rgba(27, 34, 48, 0.1);
  --site-shadow-phone: 0 12px 32px rgba(27, 34, 48, 0.22);

  /* Type. */
  --font-sans: 'IBM Plex Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 700 clamp(40px, 4.4vw, 60px) / 1.04 var(--font-sans);
  --page-title: 700 clamp(36px, 4.4vw, 56px) / 1.06 var(--font-sans);
  --h2: 700 clamp(30px, 3.2vw, 42px) / 1.12 var(--font-sans);
  --h2-sub: 700 clamp(28px, 2.8vw, 36px) / 1.15 var(--font-sans);
  --h2-band: 700 clamp(28px, 3vw, 40px) / 1.1 var(--font-sans);
  --h3: 700 22px / 28px var(--font-sans);
  --h3-small: 700 18px / 24px var(--font-sans);
  --lead: 400 18px / 28px var(--font-sans);
  --lead-origin: 400 20px / 30px var(--font-sans);
  --eyebrow: 600 14px / 20px var(--font-sans);
  --meta: 400 14px / 20px var(--font-sans);

  /* Space, measure, radius. */
  --gutter: clamp(16px, 4vw, 40px);
  --content-max: 1200px;
  --section-pad: clamp(56px, 7vw, 104px);
  --section-pad-sub: clamp(48px, 6vw, 88px);
  --prose-max: 680px;
  --radius-control: 6px;
  --radius-window: 8px;
  --radius-panel: 12px;
  --radius-phone: 36px;
  --header-h: 72px;
}