/* Re:awakening Collective — Spacing, radius, shadow, layout, motion tokens
   Geometric, generous, grid-driven. Radii are deliberately small except the
   circular brand motif (full pills / circles). */

:root {
  /* Spacing scale (4px base) */
  --sp-0: 0; /* @kind spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;
  --sp-11: 160px;

  /* Radius — small & architectural, plus the circular brand pill */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Borders */
  --bw-hair: 1px; /* @kind spacing */
  --bw-default: 1.5px; /* @kind spacing */
  --bw-bold: 2px; /* @kind spacing */

  /* Shadows — restrained, cool-tinted. Brand prefers flat + hairline borders. */
  --shadow-xs: 0 1px 2px rgba(10, 10, 11, 0.06);
  --shadow-sm: 0 2px 8px rgba(10, 10, 11, 0.07);
  --shadow-md: 0 8px 24px rgba(10, 10, 11, 0.09);
  --shadow-lg: 0 18px 48px rgba(10, 10, 11, 0.12);
  --shadow-accent: 0 12px 32px rgba(62, 84, 255, 0.28);

  /* Layout */
  --container-max: 1200px; /* @kind spacing */
  --container-wide: 1440px; /* @kind spacing */
  --gutter: clamp(20px, 5vw, 64px); /* @kind spacing */

  /* Motion — quick, confident, minimal bounce */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-base: 240ms; /* @kind other */
  --dur-slow: 420ms; /* @kind other */
}