/* ════════════════════════════════════════════════════════════════
   JERP — SPACING, RADIUS, SHADOW, LAYOUT TOKENS
   ════════════════════════════════════════════════════════════════ */

:root {
  /* ─── SPACING (4px base grid) ─────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ─── RADIUS ──────────────────────────────────────────── */
  --radius-sm: 3px;    /* small badge */
  --radius-md: 6px;    /* input inside form */
  --radius-lg: 10px;   /* DEFAULT: button, input, small card */
  --radius-xl: 16px;   /* main card / large container */
  --radius-full: 999px;/* status pill, icon chip, avatar */

  /* ─── SHADOW (light) ──────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);                                   /* card, button */
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);    /* popover, dropdown */
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.06);    /* modal, floating panel */
  --shadow-focus: 0 0 0 3px rgba(16, 185, 129, 0.25);                           /* brand focus ring */

  /* ─── LAYOUT ──────────────────────────────────────────── */
  --header-height:  64px;
  --sidebar-width:  240px;
  --content-max:    1600px;
  --mobile-max:     430px;   /* SFA app shell width */
}

/* Deeper shadows in dark mode */
.dark {
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.50), 0 2px 6px rgba(0, 0, 0, 0.35);
}