/* ============================================================================
   IFX — Spacing, radius, borders & elevation tokens.
   The brand is squared: --radius is 0. Structure comes from 1px borders
   (solid + dotted), not rounding or shadow.
   ========================================================================== */

:root {
  /* ---- Spacing (4px base) ---- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---- Radius (squared brand; one soft step for data chips) ---- */
  --radius-0: 0px;
  --radius-sm: 2px;
  --radius-pill: 999px;
  --radius: var(--radius-0);

  /* ---- Borders ---- */
  --border-width: 1px;
  --swatch-size: 12px;

  /* ---- Z-index ---- */
  --z-base: 0;       /* @kind other */
  --z-sticky: 100;   /* @kind other */
  --z-nav: 200;      /* @kind other */
  --z-overlay: 800;  /* @kind other */
  --z-modal: 900;    /* @kind other */
  --z-toast: 1000;   /* @kind other */
}