/* ============================================================
   Binding Chaos Encyclopedia — Spacing, radius, elevation, layout
   ------------------------------------------------------------
   4px base spacing scale; small radii; a deliberately FLAT
   elevation model (overlays only). Verbatim from Design Brief v1.2.
   ============================================================ */

:root {
  /* ---- Spacing scale — 4px base ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-9:  36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---- Radius ---- */
  --radius-card:  6px;   /* cards */
  --radius-pill:  4px;   /* pills, chips, tags, badges */
  --radius-round: 999px; /* search field, avatars, dots */

  /* ============================================================
     Elevation — FLAT by default.
     The encyclopedia surface uses hairline borders and tint,
     not shadow, to separate planes. Shadow appears ONLY on true
     overlays (dialogs, menus, popovers, search results).
     ============================================================ */
  --elevation-flat:    none;
  --elevation-overlay: 0 8px 24px -8px rgba(26, 26, 24, 0.18),
                       0 2px 6px -2px rgba(26, 26, 24, 0.10);

  /* ---- Focus ---- */
  --focus-ring-width: 2px;
  --focus-ring-offset:2px;

  /* ---- Layout ---- */
  --layout-max:      1280px; /* outer page max width */
  --measure-reading: 68ch;   /* long-form reading column */
  --measure-narrow:  44ch;   /* lead paragraphs / cards */
  --gutter:          var(--space-8);
  --header-height:   64px;

  /* ---- Motion — restrained, no bounce ---- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-normal: 200ms; /* @kind other */
}