/* OYKOT — Spacing, radii, sizing tokens. 4px base grid. */

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

  /* Corner radii — minimal. Squared, institutional look. */
  --radius-xs:   2px;
  --radius-sm:   2px;
  --radius-md:   4px;    /* controls               */
  --radius-lg:   5px;    /* cards                  */
  --radius-xl:   6px;    /* app tiles / panels     */
  --radius-2xl:  8px;
  --radius-pill: 4px;    /* "pills" are now squared chips */

  /* Mobile (traveler-side) radii — softer, consumer-facing. The operator console
     stays squared; the traveler app relaxes corners. Canonical names use the full
     `mobile` word for clarity alongside the operator `--radius-sm/md/lg` scale. */
  --radius-mobile-control: 14px;  /* search, steppers, CTAs        */
  --radius-mobile-card:    18px;  /* listing cards                 */
  --radius-mobile-sheet:   22px;  /* bottom sheets                 */
  --radius-mobile-pill:    999px; /* segmented / filter pills      */
  --radius-mobile-photo:   18px;  /* image surfaces                */
  /* deprecated short aliases (kept so older compiled bundles keep resolving) */
  --radius-m-control: var(--radius-mobile-control);
  --radius-m-card:    var(--radius-mobile-card);
  --radius-m-sheet:   var(--radius-mobile-sheet);
  --radius-m-pill:    var(--radius-mobile-pill);
  --radius-m-photo:   var(--radius-mobile-photo);

  /* Control heights — larger hit targets */
  --control-sm: 38px;
  --control-md: 46px;
  --control-lg: 54px;

  /* Layout */
  --container: 1200px;
  --sidebar-w: 248px;
  --topbar-h:  64px;
}