/* ── Innovame Digital · Spacing, radius, layout, motion tokens ──
   4px base grid. Tight, structural, no decorative excess. */

:root {
  /* ── SPACING (4px base) ── */
  --space-1:    4px;    /* Micro: chips, adjacent icons */
  --space-2:    8px;    /* XS: chip/badge inner padding */
  --space-4:    16px;   /* S: small card inner padding */
  --space-6:    24px;   /* M: gap between section elements */
  --space-8:    32px;   /* L: large card inner padding */
  --space-12:   48px;   /* XL: between sections */
  --space-16:   64px;   /* XXL: main section padding */
  --space-20:   80px;   /* XXL+: main section padding */

  /* ── RADIUS ── */
  --r-sm:       4px;    /* Chips, badges, small labels */
  --r:          8px;    /* Cards, callouts, inputs, buttons */
  --r-lg:       14px;   /* Large cards, modals, panels */
  --r-pill:     9999px; /* Pills, circular elements only */

  /* ── MAX WIDTHS ── */
  --w-text:     640px;   /* Text/body column (~75ch) */
  --w-grid:     1060px;  /* Component grids & layouts */
  --w-content:  960px;   /* Inner content of full-width sections */

  /* ── BORDERS ── */
  --bw:         1px; /* @kind other */
  --bw-button:  1.5px; /* @kind other */

  /* ── MOTION ── */
  --ease:       cubic-bezier(0.2, 0, 0.2, 1); /* @kind other */
  --dur-fast:   0.15s; /* @kind other */
  --dur:        0.25s; /* @kind other */

  /* ── ELEVATION (used sparingly — brand favors borders over shadow) ── */
  --shadow-sm:  0 1px 2px rgba(17, 17, 16, 0.05);
  --shadow:     0 4px 16px rgba(17, 17, 16, 0.08);
  --shadow-lg:  0 12px 40px rgba(17, 17, 16, 0.12);
}