@font-face {
  font-family: 'Manrope';
  font-weight: 800;
  font-style: normal;
  src: url('../fonts/Manrope-ExtraBold.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Work Sans';
  font-weight: 400;
  font-style: normal;
  src: url('../fonts/WorkSans-Regular.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-weight: 500;
  font-style: normal;
  src: url('../fonts/IBMPlexMono-Medium.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-weight: 700;
  font-style: normal;
  src: url('../fonts/IBMPlexMono-Bold.woff2') format('woff2');
  font-display: swap;
}

:root {
  /* Palette — Option B, locked */
  --charcoal: #1A1A18;
  --forest: #2F3B2C;
  --oak: #B98A54;
  --warm-white: #ECE7DE;

  /* Semantic assignment — light ground is the default treatment */
  --ink: var(--charcoal);
  --surface: var(--warm-white);
  --surface-raised: color-mix(in srgb, var(--surface) 94%, var(--ink) 6%);
  --surface-inset: color-mix(in srgb, var(--surface) 90%, var(--ink) 10%);
  --stone: color-mix(in srgb, var(--ink) 60%, var(--surface) 40%);
  --hairline: color-mix(in srgb, var(--ink) 12%, var(--surface) 88%);
  --hairline-strong: color-mix(in srgb, var(--ink) 16%, var(--surface) 84%);

  /* Oak, darkened for legibility as small text on light grounds. Full-strength --oak stays reserved for fills, borders, and text on dark grounds, where it already has strong contrast. */
  --oak-deep: color-mix(in srgb, var(--oak) 72%, var(--ink) 28%);

  /* Type roles */
  --font-display: 'Manrope', ui-sans-serif, system-ui, sans-serif; /* wordmark, headlines — weight 800 only, used with restraint */
  --font-body: 'Work Sans', ui-sans-serif, system-ui, sans-serif;  /* paragraph copy — weight 400 */
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace; /* specs, data, tracked-caps labels — weight 500 */
}