/* ============================================================
   SPACING, RADII, LAYOUT — Sébastien Reuille
   Sections breathe: 64/96/112px vertical rhythm, a 5% inline
   gutter, and a 80rem max container. Corners are soft but
   restrained (buttons 6px, cards/images 8px).
   ============================================================ */

:root {
  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-18: 4.5rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;
  --space-30: 7.5rem;

  /* Section rhythm (mobile / md / lg) */
  --section-py: 4rem;    /* 64px  */
  --section-py-md: 6rem; /* 96px  */
  --section-py-lg: 7rem; /* 112px */
  --gutter: 5%;

  /* Radii */
  --radius-button: 0.375rem;   /* 6px  */
  --radius-card: 0.5rem;       /* 8px  */
  --radius-image: 0.5rem;      /* 8px  */
  --radius-badge: 0.375rem;    /* 6px  */
  --radius-form: 0.375rem;     /* 6px  */
  --radius-checkbox: 0.125rem; /* 2px  */
  --radius-carousel: 0.25rem;  /* 4px  */
  --radius-full: 9999px;

  /* Containers */
  --container-xxs: 20rem;
  --container-xs: 25rem;
  --container-sm: 30rem;
  --container-md: 35rem;
  --container-lg: 48rem;
  --container-xl: 64rem;
  --container-xxl: 80rem;

  /* Breakpoints (reference values) */
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;

  /* Borders — hairline dividers, low-alpha */
  --border-on-light: var(--color-black-15);
  --border-on-dark: var(--color-white-20);
  --border-width: 1px;

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --duration-fast: 200ms; /* @kind other */
  --duration-medium: 400ms; /* @kind other */
}

/* Convenience layout utilities (optional, brand-consistent) */
.sr-container {
  margin-inline: auto;
  max-width: var(--container-xxl);
  padding-inline: var(--gutter);
}
.sr-section {
  padding-block: var(--section-py);
}
@media (min-width: 768px) {
  .sr-section { padding-block: var(--section-py-md); }
}
@media (min-width: 992px) {
  .sr-section { padding-block: var(--section-py-lg); }
}