/* ============================================================
   DP TRAINING — SPACING, RADII & LAYOUT TOKENS
   4px base grid. Corners stay tight & technical (sport/industrial),
   never pill-soft except for explicit pill controls.
   ============================================================ */

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

  /* Radii — technical, slightly squared */
  --radius-xs:  3px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* Angular clip — the signature parallelogram cut from the logo's
     "COACH SPORTIF" banner. Use on chips, ribbons, image masks. */
  --clip-slant: polygon(6% 0, 100% 0, 94% 100%, 0% 100%); /* @kind other */
  --slant-deg: -8deg; /* @kind other */

  /* Container widths */
  --container-sm: 640px;
  --container-md: 880px;
  --container-lg: 1120px;
  --container-xl: 1320px;

  /* Z layers */
  --z-base: 0;       /* @kind other */
  --z-raised: 10;    /* @kind other */
  --z-sticky: 100;   /* @kind other */
  --z-overlay: 1000; /* @kind other */
  --z-modal: 1100;   /* @kind other */
  --z-toast: 1200;   /* @kind other */

  /* Motion — energetic but premium: quick, with a slight overshoot
     on entrances. No bouncy springs on routine UI. */
  --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 */
  --ease-punch:  cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   360ms; /* @kind other */
}