/* ============================================================
   JackRelay design tokens
   Source of truth: /DESIGN.md §24
   ============================================================ */

:root {
  /* Color — warm canvas, near-black ink, one signal accent */
  --jr-canvas: #f7f6f1;
  --jr-surface: #ffffff;
  --jr-surface-2: #fbfaf7;
  --jr-elevated: #ffffff;

  --jr-ink: #17181a;
  --jr-ink-secondary: #3f4348;
  --jr-muted: #6b6f76;
  --jr-faint: #9ba0a6;

  --jr-border: #e3e4de;
  --jr-border-strong: #d2d4cc;

  --jr-primary: #315cf5;
  --jr-primary-hover: #2448d8;
  --jr-primary-soft: #e9edff;
  --jr-on-primary: #ffffff;

  --jr-success: #2a6e45;
  --jr-success-soft: #e7f2ea;
  --jr-warning: #8a5e15;
  --jr-warning-soft: #f7eedc;
  --jr-error: #b3402f;
  --jr-error-soft: #f9e9e6;

  --jr-dark: #17181a;
  --jr-dark-surface: #212326;
  --jr-dark-border: #33363b;
  --jr-on-dark: #f5f4ef;
  --jr-on-dark-secondary: #a9adb3;
  --jr-on-dark-muted: #8a8f96;
  --jr-primary-on-dark: #7d97f7;

  /* Typography */
  --jr-font-display: "Inter Tight", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", sans-serif;
  --jr-font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    sans-serif;
  --jr-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
    monospace;

  --jr-text-xs: 12px;
  --jr-text-sm: 14px;
  --jr-text-base: 16px;
  --jr-text-lg: 18px;
  --jr-text-xl: 22px;
  --jr-text-2xl: 28px;
  --jr-text-3xl: 38px;
  --jr-text-4xl: 52px;
  --jr-text-5xl: 64px;

  --jr-leading-xs: 1.45;
  --jr-leading-sm: 1.5;
  --jr-leading-base: 1.6;
  --jr-leading-lg: 1.55;
  --jr-leading-xl: 1.3;
  --jr-leading-2xl: 1.25;
  --jr-leading-3xl: 1.12;
  --jr-leading-4xl: 1.06;
  --jr-leading-5xl: 1.02;

  /* Spacing (4px base) */
  --jr-space-1: 4px;
  --jr-space-2: 8px;
  --jr-space-3: 12px;
  --jr-space-4: 16px;
  --jr-space-5: 20px;
  --jr-space-6: 24px;
  --jr-space-8: 32px;
  --jr-space-10: 40px;
  --jr-space-12: 48px;
  --jr-space-14: 56px;
  --jr-space-16: 64px;
  --jr-space-20: 80px;
  --jr-space-24: 96px;
  --jr-space-32: 128px;

  /* Radius */
  --jr-radius-sm: 8px;
  --jr-radius-md: 10px;
  --jr-radius-lg: 14px;
  --jr-radius-xl: 20px;
  --jr-radius-2xl: 24px;

  /* Elevation — subtle, reserved */
  --jr-shadow-sm: 0 1px 2px rgb(23 24 26 / 0.05);
  --jr-shadow-md: 0 2px 8px rgb(23 24 26 / 0.06), 0 0 1px rgb(23 24 26 / 0.05);
  --jr-shadow-lg: 0 12px 32px rgb(23 24 26 / 0.1), 0 0 1px rgb(23 24 26 / 0.06);

  /* Motion */
  --jr-dur-1: 150ms;
  --jr-dur-2: 250ms;
  --jr-dur-3: 450ms;
  --jr-dur-4: 700ms;
  --jr-dur-draw: 1100ms;
  --jr-stagger-1: 70ms;
  --jr-stagger-2: 140ms;

  --jr-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --jr-ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --jr-ease-linear: linear;

  /* Layout */
  --jr-container: 1200px;
  --jr-container-narrow: 780px;
  --jr-gutter: 24px;
  --jr-section-pad: var(--jr-space-24);
  --jr-nav-height: 68px;
}