/* ============================================================
   SEMANTIC · non-color  (spacing · radius · typography · font)
   Source: Figma "Habito-Dashboard".
   Numeric values verbatim; px unit added so they're usable in CSS
   (Figma stores them unit-less). Figma spells the group
   "typhography" — normalized to "font-*" here (value unchanged).
   ============================================================ */
:root{
  /* ---- spacing (px) ---- */
  --spacing-2:  2px;
  --spacing-4:  4px;
  --spacing-8:  8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;

  /* ---- radius (px) ---- */
  --radius-xs:      2px;
  --radius-sm:      4px;
  --radius-md:      6px;
  --radius-xl:      8px;
  --radius-rounded: 9999px;

  /* ---- font family ---- */
  --font-family-default: 'Neue Montreal';

  /* ---- font size / line height (px) ---- */
  --font-size-xs:   12px;   --line-height-xs: 12px;
  --font-size-sm:   14px;   --line-height-sm: 16px;
  --font-size-md:   16px;   --line-height-md: 20px;
  --font-size-2xl:  24px;   /* no line-height defined in Figma */

  /* ---- font weight ---- */
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    600;

  /* ---- letter spacing ---- */
  --letter-spacing-normal: 0;
  --letter-spacing-tight:  -0.4px;   /* Figma value: -0.4 (unit unconfirmed) */
}