/* 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 have their own rule (8px floor, 4px steps) 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;

  /* Corner radius rule: 8px floor, 4px steps (8, 12, 16, 20, 24, 28, 32…).
     Buttons, form fields, dropdowns and their menus, badges, pills and
     topic tabs all have 8px corners. Only progress bars and indicator
     lines use 50% of their height (radius-pill). Avatars and the floating
     button: radius-circle. */
  --radius-8: 8px;    /* buttons, fields, dropdown menus, badges, pills, tabs, small cards */
  --radius-12: 12px;  /* menu sheets, image corners */
  --radius-16: 16px;  /* cards, list rows */
  --radius-20: 20px;  /* chat bubbles, multi-line composer */
  --radius-24: 24px;  /* bottom sheets, large panels */
  --radius-28: 28px;
  --radius-32: 32px;
  --radius-pill: 999px; /* = 50% of height: progress bars, indicator lines */
  --radius-circle: 50%;

  /* Size rule: like spacing, every component size is a multiple of 8px.
     Dots and small marks 16; badges, pills, topic tabs, radio and checkbox 24;
     small icon buttons 32; buttons, inputs, search and dropdowns 40; large
     buttons and touch targets 48; floating button 56. */
  --size-16: 16px;  /* status dots, radio dot, unread markers */
  --size-24: 24px;  /* badges, pills, topic tabs, radio and checkbox */
  --size-32: 32px;  /* small icon buttons */
  --size-40: 40px;  /* buttons, inputs, search, dropdowns */
  --size-48: 48px;  /* large buttons, minimum touch target */
  --size-56: 56px;  /* floating action button */

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

  /* Icon sizes follow the size rule: multiples of 8, 16px floor.
     Icons inside buttons and fields are always 16px (icon-sm). */
  --icon-sm: 16px;
  --icon-md: 24px;
  --icon-lg: 32px;
  --icon-xl: 40px;

  /* 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 */
}