@font-face {
  font-family: 'Geist';
  src: url('./fonts/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Backgrounds ─────────────────────────────────── */
  --bg:      #15151e;  /* Web & App */
  --panel:   #1c1c28;  /* Web & App */
  --surface: #252535;  /* Web & App */

  /* ── Accent colors ───────────────────────────────── */
  --accent:     #e94560;                  /* Web & App */
  --accent-dim: rgba(233, 69, 96, 0.35);  /* Web & App */
  --kf:         #f5c542;                  /* Web & App */
--orange:     #f87171;                  /* Web */

  /* ── Text ────────────────────────────────────────── */
  --text:     #e8e8f0; /* Web & App */
  --text-dim: #6e6e8a; /* Web & App */
  --dim:      #6e6e8a; /* Web — alias for --text-dim */

  /* ── Borders ─────────────────────────────────────── */
  --border:       #2c2c40; /* Web & App */
  --border-light: #3a3a50; /* Web & App */

  /* ── App-specific surfaces ───────────────────────── */
  --ruler-bg:  #0f0f1a;                   /* Web & App */

/* ── Font families ───────────────────────────────── */
  --font-sans: "Geist", "Segoe UI", system-ui, -apple-system, sans-serif; /* Web & App */
  --font-mono: "Courier New", monospace;                          /* Web & App */

  /* ── Font sizes ──────────────────────────────────── */
  --text-xs:   9px;  /* Web & App */
  --text-sm:   10px; /* Web & App */
  --text-base: 11px; /* Web & App */
  --text-md:   12px; /* Web & App */
  --text-lg:   13px; /* Web & App */
  --text-xl:   14px; /* Web & App */
  --text-2xl:  16px; /* Web & App */
  --text-3xl:  17px; /* Web */

  /* ── Font weights ────────────────────────────────── */
--font-medium:    500; /* Web */
  --font-semibold:  600; /* Web & App */
  --font-bold:      700; /* Web & App */
  --font-extrabold: 800; /* Web & App */

  /* ── Line heights ────────────────────────────────── */
--leading-snug:    1.15; /* Web */
  --leading-normal:  1.6;  /* Web */
  --leading-relaxed: 1.65; /* Web */
  --leading-loose:   1.7;  /* Web & App */

  /* ── Spacing ─────────────────────────────────────── */
  --space-1:  2px;  /* App */
  --space-2:  4px;  /* App */
  --space-3:  6px;  /* App */
  --space-4:  8px;  /* App */
  --space-5:  10px; /* App */
  --space-6:  12px; /* App */
  --space-7:  14px; /* App */
  --space-8:  16px; /* App */
  --space-10: 20px; /* App */
  --space-12: 24px; /* App */
  --space-16: 32px; /* App */
  --space-20: 40px; /* App */

  /* ── Border radius ───────────────────────────────── */
  --radius-sm:   3px;   /* App */
  --radius:      4px;   /* Web & App */
  --radius-md:   6px;   /* Web & App */
  --radius-lg:   8px;   /* Web & App */
  --radius-xl:   10px;  /* Web */
  --radius-2xl:  12px;  /* Web */
  --radius-full: 999px; /* Web */
}