/* ============================================================
   VALID AI — SPACING, RADIUS, BORDERS, SHADOWS
   The system is flat and precise: hairline borders, minimal shadow,
   small radii. Structure comes from rules and mono labels, not
   heavy elevation. Backgrounds are solid warm tones — no gradients.
   ============================================================ */
:root {
  /* Spacing scale (4px base) */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* Radii — small and restrained */
  --radius-xs: 3px;
  --radius-sm: 5px;   /* buttons, inputs, chips */
  --radius-md: 8px;   /* cards */
  --radius-lg: 12px;  /* large panels */
  --radius-pill: 999px;

  /* Borders — the workhorse of the system */
  --border-hair: 1px solid var(--border);
  --border-med:  1.5px solid var(--border-strong);
  --border-ink:  1.5px solid var(--choco-900);

  /* Shadows — barely there, warm-tinted */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(26,26,24,0.06);
  --shadow-md: 0 2px 8px rgba(26,26,24,0.08);
  --shadow-lg: 0 8px 28px rgba(26,26,24,0.12);

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0, 0.1, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 180ms; /* @kind other */
}