/* ==========================================================================
   EPA — Spacing, radius, elevation, layout tokens
   Base unit: 4px. Restrained radius (technical/precise), subtle elevation.
   ========================================================================== */
:root {
  /* ---- Spacing (4px base) ---- */
  --space-xxs: 4px;
  --space-xs:  6px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;
  --space-xxl: 32px;
  --space-xxxl:48px;
  --space-block:   64px;
  --space-section: 88px;
  --space-band:    120px;

  /* ---- Radius (technical: small & squared, pills reserved for buttons) -- */
  --r-none: 0px;
  --r-sm:   4px;    /* chips, tags, inputs-inner            */
  --r-md:   8px;    /* inputs, tiles, small cards           */
  --r-lg:   14px;   /* cards, panels                        */
  --r-xl:   20px;   /* media containers, product mockups    */
  --r-full: 9999px; /* buttons, pills, badges               */

  /* ---- Elevation (subtle, corporate) ---- */
  --shadow-sm: 0 1px 2px rgba(20,24,31,0.06), 0 1px 1px rgba(20,24,31,0.04);
  --shadow-md: 0 4px 14px rgba(20,24,31,0.08), 0 2px 4px rgba(20,24,31,0.05);
  --shadow-lg: 0 16px 40px rgba(20,24,31,0.12), 0 4px 10px rgba(20,24,31,0.06);
  --focus-ring: 0 0 0 3px rgba(47,109,176,0.35);   /* steel-blue focus     */

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-wide: 1360px;
  --gutter: 24px;
  --nav-height: 68px;

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}