/* BINAL spacing, radius, shadow. The brand reads as architectural and
   precise: tiny 2px radii (almost square), hairline borders, one soft
   shadow. Avoid large rounded corners and heavy shadows. */
:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---- Radius — intentionally minimal ---- */
  --radius-xs: 2px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-pill: 999px;

  /* ---- Borders ---- */
  --border-hairline: 1px solid var(--color-divider);
  --border-strong: 1px solid var(--color-border);

  /* ---- Shadow — one soft elevation only ---- */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-raised: 0 4px 14px rgba(29, 32, 36, 0.10);

  /* ---- Logo clear space ----
     Minimum padding around the logo = the height of one diamond ("x").
     Min sizes: symbol 24px · wordmark 90px wide · lockup 120px wide. */
  --logo-clearspace: 1; /* @kind other */ /* multiply by the diamond height in use */
}