/* =====================================================================
   ЭТЕРИС ИНЖИНИРИНГ — Spacing, layout, radius, z-index
   4px base grid. Reusable across web, slides, print, social.
   ===================================================================== */
:root {
  /* ---- Spacing scale (4px grid) ------------------------------------ */
  --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.25rem;  /* 20 */
  --space-6:   1.5rem;   /* 24 */
  --space-7:   1.75rem;  /* 28 */
  --space-8:   2rem;     /* 32 */
  --space-10:  2.5rem;   /* 40 */
  --space-12:  3rem;     /* 48 */
  --space-14:  3.5rem;   /* 56 */
  --space-16:  4rem;     /* 64 */
  --space-20:  5rem;     /* 80 */
  --space-24:  6rem;     /* 96 */
  --space-28:  7rem;     /* 112 */
  --space-32:  8rem;     /* 128 */
  --space-40:  10rem;    /* 160 */

  /* ---- Semantic spacing ------------------------------------------- */
  --gap-inline:   var(--space-2);  /* icon ↔ label */
  --gap-tight:    var(--space-3);
  --gap-default:  var(--space-4);
  --gap-loose:    var(--space-6);
  --stack-card:   var(--space-4);  /* inner card rhythm */
  --section-py:   var(--space-24); /* vertical section padding */
  --section-py-sm: var(--space-16);

  /* ---- Layout ------------------------------------------------------ */
  --container-max:    1280px;
  --container-narrow: 880px;
  --container-wide:   1440px;
  --container-pad:    clamp(1rem, 0.5rem + 2vw, 2.5rem);

  /* ---- Radius ------------------------------------------------------ */
  --radius-xs:   4px;
  --radius-sm:   6px;   /* buttons, inputs */
  --radius-button: 0;  /* buttons — sharp square corners (brand) */
  --radius-md:   8px;
  --radius-lg:   12px;  /* cards */
  --radius-xl:   16px;  /* feature images */
  --radius-2xl:  24px;
  --radius-pill: 999px;

  /* ---- Z-index ---------------------------------------------------- */
  --z-base:     0;    /* @kind other */
  --z-raised:   10;   /* @kind other */
  --z-sticky:   100;  /* @kind other */
  --z-header:   200;  /* @kind other */
  --z-overlay:  900;  /* @kind other */
  --z-modal:    1000; /* @kind other */
  --z-toast:    1100; /* @kind other */

  /* ---- Component sizing ------------------------------------------- */
  --control-h-sm: 36px;
  --control-h-md: 44px;   /* min hit target */
  --control-h-lg: 52px;
  --accent-bar-w: 4px;    /* orange vertical accent bar */
}