/* ============================================================
   GVS — SPACING, RADII, BORDERS, SHADOWS, MOTION
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---- Radii ---- */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   18px;   /* signature card radius */
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 999px;

  /* ---- Borders ---- */
  --bw-hairline: 1px;
  --bw-strong:   1.5px;  /* signature hard ink outline */
  --bw-bold:     2px;
  --border-outline: var(--bw-strong) solid var(--border-strong);

  /* ---- Shadows ---- */
  /* The brand leans on hard outlines, not soft elevation. Two systems: */
  /* 1. Soft elevation for floating UI */
  --shadow-sm:  0 1px 2px rgba(15,15,15,.06), 0 1px 1px rgba(15,15,15,.04);
  --shadow-md:  0 6px 18px rgba(15,15,15,.10);
  --shadow-lg:  0 18px 48px rgba(15,15,15,.16);
  /* 2. "Pop" — solid offset shadow, the street/brutalist motif */
  --shadow-pop:    4px 4px 0 var(--gvs-ink);
  --shadow-pop-sm: 3px 3px 0 var(--gvs-ink);
  --shadow-pop-accent: 4px 4px 0 var(--gvs-accent);

  /* ---- Focus ---- */
  --focus-ring-width: 3px;
  --focus-ring-shadow: 0 0 0 var(--focus-ring-width) var(--gvs-accent-tint-2);

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(.22,.61,.36,1);   /* @kind other */
  /* slight overshoot */
  --ease-pop:   cubic-bezier(.34,1.56,.64,1);  /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   320ms; /* @kind other */

  /* ---- Layout ---- */
  --container:    1200px;
  --container-sm: 880px;
}