/* =========================================================================
   Veiss Coach — spacing, radius, density & elevation tokens
   The app supports three density modes via [data-density] on a container.
   ========================================================================= */

:root {
  /* ── Radii — small, restrained. Chips are the only fully-round element ── */
  --radius-sm:  6px;    /* inputs, small buttons, chips-as-buttons */
  --radius:     10px;   /* cards, panels */
  --radius-lg:  14px;   /* large surfaces, popovers */
  --radius-pill: 999px; /* chips, tracks, dots */

  /* ── Spacing scale (px) ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* ── Density (regular by default) ── */
  --d-row-h:     44px;   /* table row height */
  --d-card-pad:  20px;   /* card interior padding */
  --d-gap:       16px;   /* grid/stack gap */
  --d-radius:    10px;
  --d-radius-sm: 6px;

  /* ── Elevation — shadows are whisper-soft and navy-tinted ── */
  --shadow-hairline: 0 1px 0 rgba(7, 16, 31, 0.02);
  --shadow-card:     0 4px 12px rgba(7, 16, 31, 0.04), 0 1px 0 rgba(7, 16, 31, 0.02);
  --shadow-pop:      0 16px 40px rgba(7, 16, 31, 0.18);
  --shadow-tooltip:  0 8px 20px rgba(7, 16, 31, 0.25);
}

[data-density="compact"] {
  --d-row-h: 36px;
  --d-card-pad: 14px;
  --d-gap: 12px;
}

[data-density="spacious"] {
  --d-row-h: 52px;
  --d-card-pad: 28px;
  --d-gap: 20px;
}