/* Affari v2 design tokens — per docs/DESIGN-PLAN.md */

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

:root {
  /* Palette */
  --paper: #f6f3ec;
  --paper-dim: #ede9dd;
  --ink: #16182f;
  --navy: #292e72;
  --copper: #a8501b;
  --muted: #585c74;
  --line: #d9d3c4;
  --line-on-ink: rgba(246, 243, 236, 0.18);
  --paper-on-ink: #f6f3ec;
  --muted-on-ink: #a9adc4;
  --deed-label: #8b90ac;
  --deed-value: #9be29f;

  /* Type */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "IBM Plex Sans", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", Consolas, monospace;

  /* Scale */
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-display-sm: clamp(1.5rem, 3vw, 2.1rem);
  --text-display: clamp(2rem, 4.5vw, 3.1rem);
  --text-display-xl: clamp(2.4rem, 6vw, 4rem);

  /* Space */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 1rem;
  --s4: 1.5rem;
  --s5: 2.5rem;
  --s6: 4rem;
  --s7: 6.5rem;

  /* Layout */
  --measure: 40rem;
  --content: 1120px;
  --radius: 6px;
  --focus-ring: 3px solid var(--copper);
}