/* ==========================================================================
   Spacing, radius, layout & breakpoint tokens
   8px base scale (Figma used 8 / 16 / 24 / 32 / 48). Corners are sharp
   (editorial); radius tokens exist mainly for pills/dots and opt-in softening.
   ========================================================================== */

:root {
  /* --- Spacing scale (8px base) --- */
  --pf-space-0: 0;
  --pf-space-1: 0.5rem;   /*  8 */
  --pf-space-2: 1rem;     /* 16 */
  --pf-space-3: 1.5rem;   /* 24 */
  --pf-space-4: 2rem;     /* 32 */
  --pf-space-5: 3rem;     /* 48 */
  --pf-space-6: 4rem;     /* 64 */
  --pf-space-7: 6rem;     /* 96 — section rhythm */
  --pf-space-8: 8rem;     /* 128 */

  /* --- Radius --- */
  --pf-radius-none: 0;      /* default — sharp, editorial */
  --pf-radius-sm: 2px;
  --pf-radius-md: 4px;
  --pf-radius-full: 999px;  /* dots, pills */

  /* --- Layout widths --- */
  --pf-container-max: 1200px; /* outer content frame            */
  --pf-measure: 776px;        /* case-study reading column (Figma) */
  --pf-measure-hero: 900px;   /* hero intro width (Figma)       */

  /* --- Gutter (page side padding, fluid 24 → 48) --- */
  --pf-gutter: clamp(1.5rem, 1.1rem + 2vw, 3rem);

  /* --- Section vertical rhythm --- */
  --pf-section-y: clamp(3rem, 2rem + 4vw, 6rem);

  /* --- Border widths --- */
  --pf-border: 1px;
  --pf-border-strong: 2px;
}

/* Breakpoints are documented here for reference (CSS custom properties can't
   be used in @media queries). Components use these px values directly.
     --pf-bp-sm: 480px
     --pf-bp-md: 768px
     --pf-bp-lg: 1024px
     --pf-bp-xl: 1280px
*/

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */

.pf-container {
  width: 100%;
  max-width: var(--pf-container-max);
  margin-inline: auto;
  padding-inline: var(--pf-gutter);
}

.pf-measure {
  max-width: var(--pf-measure);
}

.pf-section {
  padding-block: var(--pf-section-y);
}

.pf-stack > * + * {
  margin-top: var(--pf-space-3);
}
.pf-stack-sm > * + * {
  margin-top: var(--pf-space-2);
}
.pf-stack-lg > * + * {
  margin-top: var(--pf-space-5);
}