:root {
  --vertical-padding: 20px;
  --horizontal-padding: 2rem;
  --container-width: 1000px;

  /* Spacing Scale (base unit: 4px) */
  --space-xxs: 0.25rem;
  /* 4px */
  --space-xs: 0.5rem;
  /* 8px */
  --space-sm: 0.75rem;
  /* 12px */
  --space-md: 1rem;
  /* 16px */
  --space-lg: 1.5rem;
  /* 24px */
  --space-xl: 2rem;
  /* 32px */
  --space-2xl: 3rem;
  /* 48px */
  --space-3xl: 4rem;
  /* 64px */

  /* Common Padding Combos */
  --padding-section: var(--space-2xl) var(--space-lg);
  /* vertical x horizontal */
  --padding-card: var(--space-lg);
  --padding-button: var(--space-xs) var(--space-md);
  --padding-input: var(--space-sm) var(--space-md);

  /* Container Gutters */
  --padding-container: 1rem;
  --padding-container-mobile: 1rem;
  --padding-container-desktop: 2rem;

  /* Safe Area Insets (for iOS/modern devices) */
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
  --safe-left: env(safe-area-inset-left);
  --safe-right: env(safe-area-inset-right);
}

@media screen and (max-width: 768px) {
  :root {
    --padding-container: var(--padding-container-mobile);
    --horizontal-padding: 1rem;
  }
}