/* ═══════════════════════════════════════════════════════════════════════════
 * M3E Layout Tokens & Grid System
 * Reference: docs/m3e/guidelines/layout.md
 *
 * Breakpoints: compact(<600px) / medium(600-840px) / expanded(840-1200px)
 *              / large(≥1200px)
 * Grid: 4→8→12→12 columns with responsive margins and gutters
 * Spacing: 4px base scale (10 tokens)
 * Density: 3 touch target sizes
 * ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Spacing scale (4px base) ── */
  --md-sys-spacing-1: 4px;
  --md-sys-spacing-2: 8px;
  --md-sys-spacing-3: 12px;
  --md-sys-spacing-4: 16px;
  --md-sys-spacing-5: 20px;
  --md-sys-spacing-6: 24px;
  --md-sys-spacing-8: 32px;
  --md-sys-spacing-10: 40px;
  --md-sys-spacing-12: 48px;
  --md-sys-spacing-16: 64px;

  /* ── Density touch targets ── */
  --md-sys-density-touch-target-default: 48px;
  --md-sys-density-touch-target-comfortable: 40px;
  --md-sys-density-touch-target-compact: 36px;
}


/* ── Responsive Grid ── */

.m3e-grid {
  display: grid;
  gap: var(--md-sys-spacing-2);              /* 8px gutter */
  padding-inline: var(--md-sys-spacing-4);   /* 16px margin */
  grid-template-columns: repeat(4, 1fr);     /* 4 columns */
}

/* Medium: 600px+ */
@media (min-width: 600px) {
  .m3e-grid {
    gap: var(--md-sys-spacing-4);            /* 16px gutter */
    padding-inline: var(--md-sys-spacing-6); /* 24px margin */
    grid-template-columns: repeat(8, 1fr);   /* 8 columns */
  }
}

/* Expanded: 840px+ */
@media (min-width: 840px) {
  .m3e-grid {
    gap: var(--md-sys-spacing-6);            /* 24px gutter */
    padding-inline: var(--md-sys-spacing-6); /* 24px margin */
    grid-template-columns: repeat(12, 1fr);  /* 12 columns */
  }
}

/* Large: 1200px+ */
@media (min-width: 1200px) {
  .m3e-grid {
    max-width: 1200px;
    margin-inline: auto;
  }
}


/* ── Spacing utility classes ── */

.m3e-gap-1 { gap: var(--md-sys-spacing-1); }
.m3e-gap-2 { gap: var(--md-sys-spacing-2); }
.m3e-gap-3 { gap: var(--md-sys-spacing-3); }
.m3e-gap-4 { gap: var(--md-sys-spacing-4); }
.m3e-gap-5 { gap: var(--md-sys-spacing-5); }
.m3e-gap-6 { gap: var(--md-sys-spacing-6); }
.m3e-gap-8 { gap: var(--md-sys-spacing-8); }

.m3e-p-1 { padding: var(--md-sys-spacing-1); }
.m3e-p-2 { padding: var(--md-sys-spacing-2); }
.m3e-p-3 { padding: var(--md-sys-spacing-3); }
.m3e-p-4 { padding: var(--md-sys-spacing-4); }
.m3e-p-5 { padding: var(--md-sys-spacing-5); }
.m3e-p-6 { padding: var(--md-sys-spacing-6); }
.m3e-p-8 { padding: var(--md-sys-spacing-8); }