/* WHY: These font-face declarations self-host the webfonts so no visitor data leaks to third-party CDNs (GDPR). */
/* Sora is served as one variable file covering weights 400–800. */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/sora-var.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-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-500.woff2") format("woff2");
}

/* WHY: This token file centralizes corporate design values so website and future documents share one visual source. */
:root {
  /* WHY: This warm paper tone is the page ground and ties the website to the printed letterhead. */
  --paper: #faf7f2;
  /* WHY: This sand tone marks alternating content bands without breaking the warm palette. */
  --sand: #f3ede3;
  /* WHY: This white surface creates clean contrast for cards and legal content blocks. */
  --panel: #ffffff;
  /* WHY: This deep slate carries headlines, the closing band and fine technical strokes. */
  --slate: #22345c;
  /* WHY: This blue reflects the logo text color for trustworthy links and primary actions. */
  --blue: #2d4a8f;
  /* WHY: This darker blue states the hover depth of primary actions. */
  --blue-dark: #24396f;
  /* WHY: This terracotta maps to the warm red orbit tone from the MeridianTek logo for sparse accents. */
  --terra: #c74855;
  /* WHY: This text color keeps body copy softer than pure black on the warm paper ground. */
  --text: #2b3446;
  /* WHY: This muted tone holds secondary information below the main reading level. */
  --muted: #5d6678;
  /* WHY: These warm hairlines structure panels and bands without overpowering the content. */
  --hair: #ddd3c4;
  --hair-strong: #cfc2ab;
  /* WHY: These translucent slate strokes draw borders, corner ticks and connector lines. */
  --slate-line: rgb(34 52 92 / 0.35);
  --slate-tick: rgb(34 52 92 / 0.45);

  /* WHY: This sans stack pairs the self-hosted Sora with system fallbacks for body and headings. */
  --sans: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* WHY: This mono stack gives labels, numbers and captions a precise technical voice. */
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* WHY: These radii keep cards and buttons crisp and technical instead of soft and rounded. */
  --radius-card: 9px;
  --radius-button: 6px;

  /* WHY: This gap token aligns grid gutters and connector lengths across card and flow grids. */
  --gap: 1.4rem;

  /* WHY: This spacing scale provides reusable rhythm values for sections and internal component spacing. */
  --space-1: 0.4rem;
  --space-2: 0.8rem;
  --space-3: 1.2rem;
  --space-4: 1.8rem;
  --space-5: 2.8rem;
  --space-6: 4rem;
}

/* WHY: This print layer makes the same color system reusable for document-like outputs and letters. */
@media print {
  :root {
    --paper: #ffffff;
    --sand: #ffffff;
    --panel: #ffffff;
  }
}