/**
 * Whitespace & Spacing — The Doctor Agency ERP (MEGA-BUNDLE 3, Task 3.5)
 *
 * 8-point grid (Bonus B1) tokens + safe-area insets (Bonus B4) +
 * breathable section padding + comfortable tap targets.
 *
 * Opt-in pattern: pages/components use .sp-gap-* / .sp-p-* / .sp-section
 * utility classes OR the var(--space-N) tokens directly. No globals that
 * would break existing markup.
 */

:root {
  /* 8-point grid — Bonus B1 */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   40px;
  --space-8:   48px;
  --space-9:   64px;
  --space-10:  80px;
  --space-11:  96px;
  --space-12:  128px;

  /* Semantic spacing — per Package spec */
  --section-padding-y-desktop: var(--space-8);   /* 48px */
  --section-padding-y-mobile:  var(--space-6);   /* 32px */
  --card-padding-desktop:      var(--space-5);   /* 24px */
  --card-padding-mobile:       var(--space-4);   /* 16px */
  --grid-gap-desktop:          var(--space-5);   /* 24px */
  --grid-gap-mobile:           var(--space-4);   /* 16px */
  --field-gap:                 var(--space-4);   /* 16px vertical between fields */
  --btn-padding:               var(--space-3) var(--space-5);   /* 12 24 */

  /* Minimum tap target (WCAG 2.5.5) */
  --tap-target-min: 44px;

  /* iOS safe-area insets (Bonus B4) */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
}

/* Utility classes — opt-in */
.sp-section {
  padding-block: var(--section-padding-y-desktop);
  padding-inline: var(--space-5);
}
@media (max-width: 768px) {
  .sp-section {
    padding-block: var(--section-padding-y-mobile);
    padding-inline: var(--space-4);
  }
}

.sp-card {
  padding: var(--card-padding-desktop);
}
@media (max-width: 768px) {
  .sp-card {
    padding: var(--card-padding-mobile);
  }
}

.sp-grid {
  display: grid;
  gap: var(--grid-gap-desktop);
}
@media (max-width: 768px) {
  .sp-grid { gap: var(--grid-gap-mobile); }
}

/* Form vertical rhythm */
.sp-form .sp-field,
.sp-form > label,
form .field-group {
  margin-block-end: var(--field-gap);
}

/* Tap-safe buttons */
.sp-btn,
button.sp-safe,
.nav-item {
  min-height: var(--tap-target-min);
  padding: var(--btn-padding);
  line-height: 1.2;
  touch-action: manipulation;     /* removes 300ms tap delay */
}

/* iOS safe-area for PWA standalone mode */
@media (display-mode: standalone) {
  body {
    padding-top:    max(0px, var(--safe-top));
    padding-bottom: max(0px, var(--safe-bottom));
  }
  .sidebar, [id$="Fab"], [id$="fab"] {
    padding-bottom: max(0px, var(--safe-bottom)) !important;
  }
  .header {
    padding-top: max(var(--space-2), var(--safe-top));
  }
}

/* Reading width (Bonus B5) */
.sp-readable {
  max-width: 65ch;
}

/* Container queries (Bonus B2) — cards adapt to parent, not viewport */
@container (max-width: 480px) {
  .sp-card-cq { padding: var(--card-padding-mobile); }
}