/**
 * Monetro design tokens — shared foundation for the theme and challenges-ui bundle.
 * Brand hex for --clr-red lives in style.css; RGB for alpha tokens matches 255, 78, 70.
 */

:root {
  /* ── Spacing (4px base; aligns with audit scale) ── */
  --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-11: 44px;
  --space-12: 48px;

  /* ── Font weights ── */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* ── Z-index (stacking) ── */
  --z-base:       0;
  --z-raised:     1;
  --z-dropdown:   10;
  --z-sticky:     20;
  --z-header:     100;
  --z-overlay:    200;
  --z-modal:      300;
  --z-popover:    400;
  --z-toast:      500;
  --z-skip-link:  99999;

  /* ── Red alpha (RGB matches --clr-red); consolidated ~5 levels ── */
  --clr-red-4:  rgba(255, 78, 70, 0.04);
  --clr-red-8:  rgba(255, 78, 70, 0.08);
  --clr-red-15: rgba(255, 78, 70, 0.15);
  --clr-red-25: rgba(255, 78, 70, 0.25);
  --clr-red-60: rgba(255, 78, 70, 0.60);
}