/* CYGMA spacing, radii, shadows — distilled from Figma Variables
   (see tokens/figma/fig-tokens.css for the full raw set). */

:root {
  /* ── Corner radii ("modest rounding", larger on big shapes) ── */
  --radius-xs: 3px;     /* swatches, nav-item hover */
  --radius-sm: 6px;     /* tags */
  --radius-md: 10px;    /* image containers, form fields, console keys */
  --radius-lg: 14px;    /* cards (member logos, news) */
  --radius-xl: 18px;
  --radius-2xl: 25px;   /* large cards */
  --radius-3xl: 35px;   /* section shells */
  --radius-4xl: 50px;   /* slanted section masks, hero shapes */

  /* ── Spacing ── */
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-10: 10px;
  --space-14: 14px;   /* "small" — card padding */
  --space-22: 22px;   /* horizontal gutter unit */
  --space-24: 24px;
  --space-30: 30px;
  --space-40: 40px;
  --space-50: 50px;   /* main vertical gap (desktop) */
  --space-70: 70px;
  --space-84: 84px;   /* small section inset */
  --space-160: 160px;
  --space-180: 180px; /* large section outset */

  /* ── Layout ── */
  --container-desktop: 1262px;
  --container-tablet: 1024px;
  --container-mobile: 580px;
  --width-header-narrow: 600px;
  --width-header-regular: 800px;
  --width-paragraph: 600px;
  --navbar-height: 80px;

  /* ── Shadows (subtle, black 20%) ── */
  --shadow-button: 1px 2px 3px 0px rgba(0, 0, 0, 0.2);
  --shadow-button-sm: 1px 1px 2px 0px rgba(0, 0, 0, 0.2);
  --shadow-card: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
  --hairline: inset 0 0 0 1px var(--line-20);
  --hairline-strong: inset 0 0 0 1px var(--line-80);
}