/*
  THEOS — Spacing Tokens
  ---------------------------------------------------------------
  Strict 8pt grid with a single 4px half-step for fine adjustments
  (icon-to-label gaps, border offsets). Whitespace is treated as a
  design element, not leftover space — components default to the
  generous end of this scale rather than the tight end.
*/

:root {
  --space-0: 0px;
  --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;
  --space-10: 128px;
  --space-11: 160px;
  --space-12: 192px;

  /* Semantic aliases */
  --space-component-xs: var(--space-2);   /* icon-label gap */
  --space-component-sm: var(--space-3);   /* internal control padding */
  --space-component-md: var(--space-4);   /* card internal padding, small */
  --space-component-lg: var(--space-5);   /* card internal padding, default */
  --space-stack-sm: var(--space-4);       /* related items in a list */
  --space-stack-md: var(--space-6);       /* distinct components in a column */
  --space-section-sm: var(--space-9);     /* between page sections, compact */
  --space-section-lg: var(--space-10);    /* between page sections, default */
  --space-section-xl: var(--space-12);    /* hero-to-content breathing room */

  /* Safe areas (mobile viewport insets) */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}