/* Spacing, radii, sizes. Generous by default — density is an anti-feature here.
   Base unit 4px, but the working steps for this product are the large ones. */

:root {
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 56px;
  --space-11: 72px;

  --gutter-screen: var(--space-6);   /* 20px — app edge */
  --gap-stack: var(--space-5);
  --gap-section: var(--space-8);

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --hit-min: 44px;                  /* never smaller */
  --control-h: 52px;                /* primary answer buttons */
  --row-h: 56px;

  /* Turned up by the vivid level: a coloured edge on the "Jetzt" card, a card
     radius, and how much of a category tint a list row carries. */
  --card-edge: 0px;
  --border-card-width: 1px;
  --row-border-width: 0px;
  --hover-lift: 0px;
  --radius-card: var(--radius-xl);
  --cat-row-fill: 0%;
  --msg-rule: 1px;

  --border-hairline: 1px;
  --border-emphasis: 1.5px;
}