/* ===========================================================================
   Tragitto — Spacing, radii, shadows, layout, motion
   4px base rhythm. Soft, warm, rounded — a calm travel companion.
   =========================================================================== */

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

  /* Semantic spacing */
  --gap-inline:  var(--space-2);   /* icon ↔ label */
  --gap-stack:   var(--space-3);   /* stacked rows */
  --pad-card:    var(--space-5);   /* inside a card */
  --pad-screen:  var(--space-5);   /* screen horizontal gutter */
  --pad-control: var(--space-4);   /* inside buttons / inputs */

  /* --- Radii ------------------------------------------------------------- */
  --radius-xs:    8px;
  --radius-sm:    12px;
  --radius-md:    16px;   /* inputs, icon tiles */
  --radius-lg:    22px;   /* cards */
  --radius-xl:    28px;   /* sheets, hero cards */
  --radius-2xl:   34px;   /* bottom sheets */
  --radius-pill:  999px;  /* buttons, badges, chips */
  --radius-round: 50%;    /* avatars, FAB, progress ring */

  /* --- Shadows (warm slate-tinted, very soft) ---------------------------- */
  --shadow-xs:   0 1px 2px rgba(61, 64, 91, 0.06);
  --shadow-sm:   0 2px 8px rgba(61, 64, 91, 0.06);
  --shadow-card: 0 8px 24px -8px rgba(61, 64, 91, 0.12),
                 0 2px 6px rgba(61, 64, 91, 0.05);
  --shadow-md:   0 14px 34px -10px rgba(61, 64, 91, 0.16),
                 0 3px 8px rgba(61, 64, 91, 0.06);
  --shadow-lg:   0 24px 60px -16px rgba(61, 64, 91, 0.22),
                 0 6px 14px rgba(61, 64, 91, 0.08);
  --shadow-sheet: 0 -16px 48px -12px rgba(44, 46, 68, 0.18);
  --shadow-brand: 0 12px 28px -8px rgba(224, 122, 95, 0.42);   /* FAB / primary glow */
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5);

  /* --- Layout ------------------------------------------------------------ */
  --screen-w:        390px;   /* iPhone reference width */
  --screen-h:        844px;
  --safe-top:        56px;
  --safe-bottom:     34px;
  --tabbar-h:        72px;
  --header-h:        60px;
  --content-max:     520px;
  --hit-target:      44px;     /* min touch target */

  /* --- 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 */ /* gentle settle */
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */ /* light bounce on press */
  --dur-fast:      120ms;   /* @kind other */
  --dur-base:      200ms;   /* @kind other */
  --dur-slow:      320ms;   /* @kind other */
  --dur-sheet:     420ms;   /* @kind other */

  /* Press / hover deltas */
  --press-scale:   0.97;   /* @kind other */
  --hover-lift:    -2px;   /* @kind other */
}