/* ============================================================
   Unkillable Window — design tokens (consolidated /css/ system)
   Site 8 visual elevation (The Ladder): the seven-file CSS layer
   (style.css, brand-refresh.css, quick-calculator.css, fonts.css
   + the leaf trio) consolidated into /css/tokens.css,
   /css/components.css, /css/site.css. @font-face folded in from
   the retired /fonts.css (byte-identical rules).
   ============================================================ */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/ibm-plex-sans-latin.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-latin.woff2") format("woff2");
}

:root {
  /* ---- Brand: status-green (uptime), amber for warnings ---- */
  --brand-600: #15803d;
  --brand-700: #166534;
  --brand-50:  #f0fdf4;
  --brand-100: #dcfce7;
  --accent-500: #f59e0b;
  --signal: #22c55e;        /* signal green — DARK surfaces only (slate-800+) */
  --signal-soft: #7ddf9d;   /* light green for figures on dark */
  --error: #b91c1c;

  /* ---- Neutrals: cool slate ---- */
  --ink-950: #0b1220;
  --ink-900: #131b2c;
  --ink-700: #2d3748;
  --ink-500: #5c6879;
  --ink-400: #8592a6;
  --slate-800: #1e293b;
  --paper:   #ffffff;
  --paper-2: #f6f8f7;
  --line:    #e4e9e6;

  /* Legacy alias used by ported directory rules */
  --brand: var(--brand-700);
  --muted: var(--ink-500);

  /* ---- Type ---- */
  --font-display: "IBM Plex Sans", "Inter", -apple-system, "Segoe UI", sans-serif;
  --font-body: "IBM Plex Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Fluid scale — display shrinks gracefully on mobile */
  --text-hero:    clamp(2.5rem, 1.4rem + 5vw, 4.5rem);
  --text-h1:      clamp(2rem, 1.3rem + 3.2vw, 3.25rem);
  --text-h2:      clamp(1.5rem, 1.15rem + 1.8vw, 2.25rem);
  --text-h3:      1.25rem;
  --text-lead:    clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --text-body:    1rem;
  --text-small:   0.875rem;
  --text-caption: 0.75rem;

  --leading-tight: 1.05;
  --leading-snug:  1.25;
  --leading-body:  1.65;

  --tracking-display: -0.02em;

  /* ---- Spacing (8pt) ---- */
  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem;
  --s6: 1.5rem;  --s8: 2rem;   --s12: 3rem;  --s16: 4rem;
  --s24: 6rem;   --s32: 8rem;

  --section-pad: clamp(3.5rem, 2rem + 6vw, 7rem);
  --container: 72rem;          /* 1152px */
  --container-narrow: 44rem;

  /* ---- Shape & depth ---- */
  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(12 15 20 / 0.06);
  --shadow-md: 0 6px 24px -8px rgb(12 15 20 / 0.14);
  --shadow-lg: 0 24px 64px -24px rgb(12 15 20 / 0.22);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 220ms;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}