/* Tapas — Spacing & radius tokens
 * Spacing follows the Tailwind 4px base scale used throughout the app
 * (p-4 = 16px mobile pad, p-6 = 24px desktop pad, gap-4 / gap-6 sections).
 * Radius derives from --radius: 0.625rem (10px), matching app/globals.css.
 */

:root {
  /* Spacing scale (Tailwind steps, rem) */
  --space-0-5: 0.125rem; /* 2px */
  --space-1: 0.25rem;    /* 4px */
  --space-1-5: 0.375rem; /* 6px */
  --space-2: 0.5rem;     /* 8px */
  --space-3: 0.75rem;    /* 12px */
  --space-4: 1rem;       /* 16px — default gap, mobile page pad */
  --space-5: 1.25rem;    /* 20px */
  --space-6: 1.5rem;     /* 24px — desktop page pad, section gap */
  --space-8: 2rem;       /* 32px */
  --space-12: 3rem;      /* 48px */

  /* Layout */
  --content-max: 80rem;      /* max-w-7xl — app shell content */
  --module-max: 87.5rem;     /* max-w-[1400px] — module page shell */
  --sidebar-width: 16rem;    /* w-64 */
  --sidebar-width-collapsed: 4rem; /* w-16 */
  --header-height-desktop: 4rem;   /* h-16 */
  --header-height-mobile: 3.5rem;  /* h-14 */

  /* Radius (base 10px) */
  --radius: 0.625rem;
  --radius-sm: calc(var(--radius) - 4px); /* 6px */
  --radius-md: calc(var(--radius) - 2px); /* 8px */
  --radius-lg: var(--radius);             /* 10px */
  --radius-xl: calc(var(--radius) + 4px); /* 14px */
  --radius-2xl: 1rem;                     /* 16px — mobile cards */
  --radius-full: 9999px;

  /* Touch target minimum (mobile) */
  --touch-min: 2.75rem; /* 44px */
}