/* ============================================================
   CryptoCalcy — Spacing, Radius, Layout, Z-index, Sizes
   Base unit: 4px. Multiples of 4 throughout.
   ============================================================ */

:root {
  /* ---------- Spacing scale ---------- */
  --space-0:   0;
  --space-1:   2px;
  --space-2:   4px;   /* xxs */
  --space-3:   8px;   /* xs  */
  --space-4:   12px;  /* sm  */
  --space-5:   16px;  /* md  */
  --space-6:   24px;  /* lg  */
  --space-7:   32px;  /* xl  */
  --space-8:   48px;  /* xxl */
  --space-9:   64px;
  --space-10:  80px;  /* section rhythm */
  --space-11:  96px;
  --space-12:  128px;

  --space-section: var(--space-10);   /* 80px editorial band */

  /* ---------- Border radius ---------- */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;    /* buttons, inputs */
  --radius-lg:   8px;    /* content cards */
  --radius-xl:   12px;   /* elevated containers */
  --radius-2xl:  16px;
  --radius-pill: 9999px;
  --radius-full: 50%;

  /* ---------- Container widths ---------- */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1280px;   /* marketing max */
  --container-2xl:  1440px;   /* product surfaces */
  --container-prose: 680px;

  /* ---------- Grid ---------- */
  --grid-columns: 12; /* @kind other */
  --grid-gutter:  var(--space-6);

  /* ---------- Z-index scale ---------- */
  --z-base:      0; /* @kind other */
  --z-raised:    10; /* @kind other */
  --z-dropdown:  1000; /* @kind other */
  --z-sticky:    1100; /* @kind other */
  --z-drawer:    1200; /* @kind other */
  --z-overlay:   1300; /* @kind other */
  --z-modal:     1400; /* @kind other */
  --z-popover:   1500; /* @kind other */
  --z-toast:     1600; /* @kind other */
  --z-tooltip:   1700; /* @kind other */

  /* ---------- Icon sizes ---------- */
  --icon-xs: 12px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 32px;

  /* ---------- Avatar / coin sizes ---------- */
  --avatar-xs: 20px;
  --avatar-sm: 24px;
  --avatar-md: 32px;
  --avatar-lg: 40px;
  --avatar-xl: 56px;

  /* ---------- Control heights ---------- */
  --control-sm: 28px;
  --control-md: 36px;
  --control-lg: 44px;

  /* ---------- Blur scale ---------- */
  --blur-sm:  4px;
  --blur-md:  8px;
  --blur-lg:  16px;
  --blur-xl:  24px;

  /* ---------- Opacity scale ---------- */
  --opacity-disabled: 0.4; /* @kind other */
  --opacity-muted:    0.64; /* @kind other */
  --opacity-hover:    0.08; /* @kind other */
  --opacity-scrim:    0.68; /* @kind other */
}

/* ---------- Breakpoints (reference values for consumers) ----------
   --bp-mobile  : 0     – 767px
   --bp-tablet  : 768   – 1023px
   --bp-desktop : 1024  – 1439px
   --bp-wide    : 1440px+
   ------------------------------------------------------------------ */