/* ============================================================
   MAXRENTAL — Spacing, radius, shadow & layout tokens
   Spacing scale mirrors the Figma 4px base grid.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base grid) ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  80px;
  --space-10: 96px;
  --space-11: 128px;

  /* ---- Radius scale ---- */
  --radius-1:    4px;
  --radius-2:    6px;    /* default — buttons, inputs, cards */
  --radius-3:    8px;
  --radius-4:    12px;
  --radius-5:    16px;
  --radius-6:    24px;
  --radius-full: 9999px;

  /* Semantic radius */
  --radius-control: var(--radius-2);  /* buttons / inputs */
  --radius-card:    var(--radius-2);
  --radius-pill:    var(--radius-full);

  /* ---- Layout ---- */
  --container-max:   1280px;
  --content-max:     1152px;   /* 1280 − 64×2 gutters */
  --section-pad-x:   var(--space-8);   /* 64 */
  --section-pad-y:   var(--space-11);  /* 128 */
  --nav-height:      70px;

  /* ---- Elevation ---- *
     The brand leans on hairline borders & flat fills more than shadow;
     shadows stay soft and low. */
  --shadow-xs:    0 1px 2px rgba(14, 14, 14, 0.06);
  --shadow-sm:    0 2px 8px rgba(14, 14, 14, 0.06);
  --shadow-md:    0 8px 24px rgba(14, 14, 14, 0.08);
  --shadow-lg:    0 16px 48px rgba(14, 14, 14, 0.12);
  --shadow-brand: 0 8px 24px rgba(233, 68, 68, 0.28);  /* red CTA glow */

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-normal: 220ms; /* @kind other */
  --dur-slow:   400ms; /* @kind other */
}