/* Design tokens. Neutral ramp is derived from the brand anthracite #2B2B2A (warm tint). */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Dark ramp (warm anthracite) */
  --ink-950: #121110;
  --ink-900: #1a1918;
  --ink-850: #222120;
  --ink-800: #2b2b2a;
  --ink-line: rgba(239, 236, 230, 0.12);
  --on-ink: #efece6;
  --on-ink-2: #b3afa7;
  --on-ink-3: #8f8b83;

  /* Light ramp (warm paper) */
  --paper-100: #f6f4f0;
  --paper-50: #fdfcfa;
  --paper-200: #ece9e3;
  --paper-line: rgba(29, 28, 26, 0.12);
  --on-paper: #1d1c1a;
  --on-paper-2: #55524c;
  --on-paper-3: #6c6862;

  /* The single accent: fire-engine red */
  --red-500: #e31e24; /* fills, white text on it passes 4.5:1 */
  --red-600: #c8161c; /* text and links on light surfaces */
  --red-700: #a91217; /* hover on red fills */
  --red-400: #ff6b6f; /* text and icons on dark surfaces */

  /* Type */
  --font-display: "Bricolage Grotesque", "Arial Narrow", Arial, sans-serif;
  --font-text: "Figtree", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  /* 4px spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* Radius */
  --r-tag: 4px;
  --r-control: 8px;
  --r-card: 12px;

  /* Layout */
  --gutter: 16px;
  --container: 1200px;
  --header-h: 64px;
  --section-y: 64px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 150ms;
  --t-enter: 400ms;
}

@media (min-width: 768px) {
  :root {
    --gutter: 24px;
    --section-y: 96px;
  }
}
@media (min-width: 1100px) {
  :root {
    --gutter: 32px;
    --section-y: 112px;
  }
}