/* ── ritter & bader · Spacing, layout, radii, shadows ────────────────
   The grid is a classic 12-column, 1140px content width with 30px
   gutters. Spacing steps come straight from the brand's spacing scale
   (4 · 8 · 16 · 24 · 32 · 48 · 80). Corners are gently rounded (4px on
   controls, 8px on cards); the only shadow is a soft card lift. */

:root {
  /* Spacing scale (px) */
  --space-4:   4px;
  --space-8:   8px;
  --space-16:  16px;
  --space-24:  24px;
  --space-32:  32px;
  --space-48:  48px;
  --space-80:  80px;

  /* Semantic aliases */
  --space-xs:  var(--space-4);
  --space-sm:  var(--space-8);
  --space-md:  var(--space-16);
  --space-lg:  var(--space-24);
  --space-xl:  var(--space-32);
  --space-2xl: var(--space-48);
  --space-3xl: var(--space-80);

  /* Layout grid */
  --content-width: 1140px;
  --grid-columns:  12; /* @kind other */
  --grid-gutter:   30px;
  --card-gap:      30px;
  --section-gap:   100px;   /* Section rhythm: 80–100px */

  /* Radii */
  --radius-control: 4px;    /* buttons, inputs, badges, checkbox           */
  --radius-card:    8px;    /* cards, iceberg rule box                     */
  --radius-section: 6px;    /* spec-sheet section header bars              */
  --radius-pill:    2px;    /* accent bar / small nubs                     */

  /* Borders (as inset box-shadows, matching Figma) */
  --ring-subtle: inset 0 0 0 1px var(--border-subtle);
  --ring-strong: inset 0 0 0 2px var(--border-strong);
  --ring-focus:  inset 0 0 0 2px var(--rb-primary-blau);
  --ring-error:  inset 0 0 0 1px var(--rb-error);

  /* Shadows */
  --shadow-card:  0 4px 16px 0 rgba(0,0,0,0.08);
  --shadow-soft:  0 4px 16px 0 rgba(15,38,61,0.10);
  --shadow-hover: 0 8px 24px 0 rgba(15,38,61,0.14);

  /* Motion — quiet, functional, no bounce */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --dur-fast:  120ms; /* @kind other */
  --dur-base:  200ms; /* @kind other */
}