/* ==========================================================================
   RideOn Tour Travels — Spacing, Radius, Elevation, Motion, Border tokens
   ========================================================================== */

:root {
  /* Spacing scale — 4px base */
  --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-8: 2rem;      /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */
  --space-32: 8rem;     /* 128 */

  /* Container / grid */
  --container-max: 1280px;
  --container-pad: var(--space-6);
  --grid-cols-desktop: 12; /* @kind other */
  --grid-cols-tablet: 8; /* @kind other */
  --grid-cols-mobile: 4; /* @kind other */
  --grid-gutter: var(--space-6);

  /* Breakpoints (reference values — for use in JS/comments) */
  --bp-mobile: 640px; /* @kind other */
  --bp-tablet: 1024px; /* @kind other */
  --bp-desktop: 1280px; /* @kind other */
  --bp-wide: 1536px; /* @kind other */

  /* Radius — soft, palace-arch inspired; never sharp, never pill-everything */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --radius-arch: 200px 200px 0 0; /* jharokha window arch, top corners only */

  /* Elevation / shadow — warm umber tint, never cool gray */
  --shadow-xs: 0 1px 2px rgba(76, 45, 20, 0.08);
  --shadow-sm: 0 2px 8px rgba(76, 45, 20, 0.10);
  --shadow-md: 0 8px 24px rgba(76, 45, 20, 0.14);
  --shadow-lg: 0 20px 48px rgba(76, 45, 20, 0.18);
  --shadow-gold: 0 8px 24px rgba(201, 150, 44, 0.28);

  /* Opacity */
  --opacity-disabled: 0.45; /* @kind other */
  --opacity-hover-veil: 0.06; /* @kind other */
  --opacity-scrim: 0.55; /* @kind other */

  /* 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 */
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0); /* @kind other */
  --dur-fast: 150ms; /* @kind other */
  --dur-base: 250ms; /* @kind other */
  --dur-slow: 400ms; /* @kind other */
  --dur-page: 600ms; /* @kind other */

  /* Border */
  --border-width: 1px;
  --border-width-md: 1.5px;
}