/* ============================================================================
   SPACING, RADIUS & LAYOUT — the O@W rhythm
   Generous section padding (7rem default), a 1440px max grid, pill buttons,
   and 1rem rounded media are the structural signatures of the brand.
   ========================================================================== */
:root {
  /* Size scale (rem) — primitive steps */
  --size--0rem: 0rem;
  --size--0-125rem: 0.125rem;
  --size--0-25rem: 0.25rem;
  --size--0-375rem: 0.375rem;
  --size--0-5rem: 0.5rem;
  --size--0-75rem: 0.75rem;
  --size--1rem: 1rem;
  --size--1-25rem: 1.25rem;
  --size--1-5rem: 1.5rem;
  --size--2rem: 2rem;
  --size--2-5rem: 2.5rem;
  --size--3rem: 3rem;
  --size--3-5rem: 3.5rem;
  --size--4rem: 4rem;
  --size--4-5rem: 4.5rem;
  --size--5rem: 5rem;
  --size--5-5rem: 5.5rem;
  --size--6rem: 6rem;
  --size--6-5rem: 6.5rem;
  --size--7rem: 7rem;
  --size--7-5rem: 7.5rem;
  --size--8rem: 8rem;
  --size--10rem: 10rem;
  --size--12rem: 12rem;
  --size--16rem: 16rem;

  /* Spacing scale (semantic) — 0.25 · 0.5 · 0.75 · 1 · 1.5 · 2 · 3 · 4 rem */
  --space--1: var(--size--0-25rem);
  --space--2: var(--size--0-5rem);
  --space--3: var(--size--0-75rem);
  --space--4: var(--size--1rem);
  --space--5: var(--size--1-5rem);
  --space--6: var(--size--2rem);
  --space--7: var(--size--3rem);
  --space--8: var(--size--4rem);

  /* Section vertical rhythm */
  --section-space--none: var(--size--0rem);
  --section-space--small: var(--size--5rem);   /* 80px  */
  --section-space--main: var(--size--7rem);    /* 112px */
  --section-space--large: var(--size--10rem);  /* 160px */

  /* Radius */
  --radius--small: 0.5rem;
  --radius--main: 1rem;
  --radius--round: 100vw;   /* pills / circles */
  --radius--visual: 10vw;   /* large image corners */

  /* Layout / site frame */
  --site--width: 90rem;     /* 1440px max content width */
  --site--gutter: 1rem;
  --site--column-count: 12; /* @kind other */
  --container--small: 48rem;
  --container--main: var(--site--width);
  --container--full: 100%;

  /* Borders / focus */
  --border-width--main: 0.094rem;     /* ~1.5px hairline */
  --focus--width: 0.125rem;
  --focus--offset-outer: 0.1875rem;
}

@media (max-width: 991px) {
  :root {
    --section-space--main: var(--size--5rem);
    --section-space--large: var(--size--7rem);
  }
}
@media (max-width: 479px) {
  :root { --site--gutter: var(--space--4); }
}