/* Kisholoy — spacing, radii, and layout tokens.
   ─────────────────────────────────────────────────────────────────
   CORE FOUNDATIONAL RULE: the spacing unit is 8px. Every margin,
   padding, and gap in the system must be a MULTIPLE of 8 — 8, 16, 24,
   32, 40, 48, 56, 64... Never an off-unit value (10, 20, 30px, etc).
   The default page gutter (side margin on any screen) is 24px.

   Radii and icon sizes are governed by their own rules (pill = height
   ÷ 2; icon sizes per the icon-size rule) and are NOT snapped to the
   8px spacing grid. */

:root {
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;   /* default page gutter */
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 56px;
  --space-8: 64px;
  --space-9: 80px;   /* bottom nav height */

  --gutter: var(--space-3); /* 24px — default screen side-margin */

  --screen-width: 360px;

  --radius-pill-sm: 12px;   /* 24px-tall tab pill */
  --radius-pill-md: 15px;   /* 30px-tall chip */
  --radius-pill-lg: 20px;   /* 40px-tall button/input */
  --radius-pill-xl: 25px;   /* 50px-tall button/input */
  --radius-circle: 50%;

  /* Tooltip / collapsible-menu radii — a separate small-surface scale,
     NOT the pill scale above. Floor 8px, steps of at least 4px:
     8, 12, 16, 20... */
  --radius-menu-sm: 8px;    /* tooltip / small popover — the floor */
  --radius-menu-md: 12px;   /* dropdown / collapsible menu sheet */
  --radius-menu-lg: 16px;   /* larger menu / bottom sheet */

  /* Collapsible-menu item layout: 16px icon, 8px gap, 12px (--text-sm) label */
  --menu-item-icon: 16px;
  --menu-item-gap: 8px;

  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 30px;

  /* Imagery aspect ratios — locked per image kind, not on the 8px
     spacing grid. Profile images (kid/personal/expert/org) use Avatar's
     own 1:1 circular crop, not this scale. */
  /* Avatar's crop ratio, for reference; Avatar hardcodes its own circle */
  --aspect-profile: 1 / 1; /* @kind other */
  /* cover images: profile/org banners */
  --aspect-cover: 2 / 1; /* @kind other */
  /* post images: user-uploaded with a forum/feed post */
  --aspect-post: 1 / 1; /* @kind other */
  /* discussion images: user-uploaded starting a discussion */
  --aspect-discussion: 16 / 9; /* @kind other */
}