/* Sapien — Spacing, radii, layout, motion tokens
   The site is built on a hairline grid: square cards, 0-radius dividers,
   generous vertical rhythm. Pills are the one exception (buttons). */

:root {
  /* ---- Spacing scale (px) — mirrors the Figma 4/16/24/80/120/240 set */
  --sp-space-0: 0;
  --sp-space-1: 4px;
  --sp-space-2: 8px;
  --sp-space-3: 12px;
  --sp-space-4: 16px;
  --sp-space-5: 24px;
  --sp-space-6: 32px;
  --sp-space-7: 40px;
  --sp-space-8: 48px;
  --sp-space-9: 60px;
  --sp-space-10: 80px;
  --sp-space-12: 120px;
  --sp-space-16: 160px;
  --sp-space-24: 240px;

  /* ---- Radii ----------------------------------------------------- */
  --sp-radius-none: 0px;    /* default — cards & dividers are square  */
  --sp-radius-xs: 4px;
  --sp-radius-sm: 8px;
  --sp-radius-md: 10px;     /* small status icons                    */
  --sp-radius-pill: 40px;   /* buttons                               */
  --sp-radius-full: 999px;

  /* ---- Borders --------------------------------------------------- */
  --sp-border-width: 1px;
  --sp-border-hairline: 0.5px;

  /* ---- Shadows (used sparingly) ---------------------------------- */
  --sp-shadow-card: inset 0 0 0 0.5px var(--sp-line), 0 0 0 0.5px var(--sp-line);
  --sp-shadow-soft: 0 1px 2px rgba(96,110,123,0.10);
  --sp-shadow-pop: 0 8px 40px rgba(17,17,17,0.10);

  /* ---- Layout ---------------------------------------------------- */
  --sp-container: 1280px;
  --sp-container-pad: 16px;
  --sp-gutter: 24px;

  /* ---- Conic "sphere" gradient backgrounds (from site CSS) ------- */
  --sp-grad-lightgrey: conic-gradient(from 56.1deg at 50.2% 133.77%, #F6F6F6 -12.91deg, #F1F3F5 232.63deg, #F6F6F6 347.09deg, #F1F3F5 592.63deg); /* @kind other */
  --sp-grad-chrome: conic-gradient(from 70.55deg at 50.2% 133.77%, #C0C2C1 -12.91deg, #8E9BA1 217.27deg, #C0C2C1 347.09deg, #8E9BA1 577.27deg); /* @kind other */
  --sp-grad-water: conic-gradient(from 56.1deg at 50.2% 133.77%, #788B93 -12.91deg, #465967 217.27deg, #788B93 347.09deg, #465967 577.27deg); /* @kind other */
  --sp-grad-night: conic-gradient(from 56.1deg at 50.2% 133.77%, #33434F -12.91deg, #18232C 217.27deg, #33434F 347.09deg, #18232C 577.27deg); /* @kind other */

  /* ---- Motion ---------------------------------------------------- */
  --sp-ease: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --sp-ease-inout: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --sp-dur-fast: 160ms; /* @kind other */
  --sp-dur: 280ms; /* @kind other */
  --sp-dur-slow: 480ms; /* @kind other */
}