:root {
    /* ---- Border Radius ---- */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-full: 9999px;

    /* ---- Spacing (8pt Grid) ---- */
    --space-0: 0px;
    --space-1: 4px;    /* fine-tuning inside components */
    --space-2: 8px;    /* tight spacing, icon gaps */
    --space-3: 12px;   /* label-to-input gap */
    --space-4: 16px;   /* default internal padding */
    --space-5: 20px;   /* compact section spacing */
    --space-6: 24px;   /* card padding, form field gaps */
    --space-7: 32px;   /* section spacing */
    --space-8: 40px;   /* large section gaps */
    --space-9: 48px;   /* section dividers */
    --space-10: 64px;  /* page section spacing */
    --space-11: 80px;  /* hero spacing */
    --space-12: 96px;  /* major page divisions */
    --space-13: 128px; /* page-level whitespace */

    /* ---- Responsive Breakpoints ---- */
    --bp-sm: 640px;    /* mobile landscape */
    --bp-md: 768px;    /* tablet portrait */
    --bp-lg: 1024px;   /* tablet landscape / small desktop */
    --bp-xl: 1280px;   /* desktop */
    --bp-2xl: 1536px;  /* large desktop */

    /* ---- Shadows ---- */
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.06), 0 4px 6px rgba(0,0,0,0.04);
    --shadow-xl: 0 20px 25px rgba(0,0,0,0.08), 0 8px 10px rgba(0,0,0,0.04);

    /* ---- Layout Constants ---- */
    --panel-width: 256px;
  }