/* ── Mon Expert DSI · Spacing, radii, shadows, motion ───────────────────
   8px base rhythm. Premium = generous whitespace, restrained radii,
   soft layered shadows, and a subtle metallic edge highlight on dark.
------------------------------------------------------------------------ */
:root {
  /* Spacing scale (8px base, with 2/4 micro steps) */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  2.5rem;   /* 40 */
  --space-8:  3rem;     /* 48 */
  --space-9:  4rem;     /* 64 */
  --space-10: 5rem;     /* 80 */
  --space-12: 7rem;     /* 112 */

  /* Radii — restrained, premium (no pill-everything) */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   26px;
  --radius-2xl:  36px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Border widths */
  --border-hair: 1px;
  --border-thin: 1.5px;
  --border-thick: 2px;

  /* Elevation — soft, cool-tinted shadows (petrol-derived) */
  --shadow-xs:  0 1px 2px rgba(7, 26, 40, 0.06);
  --shadow-sm:  0 1px 3px rgba(7, 26, 40, 0.08), 0 1px 2px rgba(7, 26, 40, 0.06);
  --shadow-md:  0 4px 12px rgba(7, 26, 40, 0.10), 0 2px 4px rgba(7, 26, 40, 0.06);
  --shadow-lg:  0 12px 28px rgba(7, 26, 40, 0.14), 0 4px 10px rgba(7, 26, 40, 0.08);
  --shadow-xl:  0 24px 56px rgba(7, 26, 40, 0.20), 0 8px 18px rgba(7, 26, 40, 0.10);

  /* Premium accent glows */
  --glow-gold:   0 6px 22px rgba(248, 208, 54, 0.32);
  --glow-orange: 0 6px 22px rgba(249, 134, 82, 0.30);
  --glow-petrol: 0 10px 30px rgba(19, 67, 97, 0.30);

  /* Metallic edge highlight (use as inset on dark surfaces) */
  --edge-light: inset 0 1px 0 rgba(255, 255, 255, 0.14); /* @kind shadow */
  --edge-bevel: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(0,0,0,0.30); /* @kind shadow */

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   220ms; /* @kind other */
  --dur-slow:   360ms; /* @kind other */

  /* Layout */
  --container-sm: 640px; /* @kind other */
  --container-md: 880px; /* @kind other */
  --container-lg: 1120px; /* @kind other */
  --container-xl: 1320px; /* @kind other */
}