/* MBS Global — Spacing, radii, borders, shadows & layout tokens */

:root {
  /* ----- Spacing scale (rem) ----- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-18: 4.5rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-30: 7.5rem;   /* section rhythm — vertical padding between sections */

  /* Section padding presets */
  --section-py: 7rem;       /* desktop */
  --section-py-sm: 4rem;    /* mobile */
  --gutter: 5%;             /* page side gutter */

  /* ----- Radii ----- */
  --radius-button: 6.25rem;   /* 100px — fully pill */
  --radius-badge: 6.25rem;    /* 100px — pill */
  --radius-card: 1rem;        /* 16px */
  --radius-image: 1rem;       /* 16px */
  --radius-input: 0.75rem;    /* 12px */
  --radius-checkbox: 0.25rem; /* 4px */

  /* ----- Borders ----- */
  --border-width: 1px;
  --divider-width: 1px;

  /* ----- Elevation ----- *
   The brand leans flat: hierarchy comes from hairline borders and surface
   tint, not drop shadows. These soft shadows are reserved for overlays
   (dropdowns, dialogs, toasts) floating above the page. */
  --shadow-overlay: 0 24px 64px -16px rgba(0, 0, 0, 0.7);
  --shadow-pop: 0 8px 24px -8px rgba(0, 0, 0, 0.6);

  /* Glass effect for icon tiles / floating menus */
  --glass-bg: var(--color-white-5);
  --glass-border: var(--color-white-15);
  --glass-blur: 10px;

  /* ----- Containers (max-widths) ----- */
  --container-sm: 30rem;
  --container-md: 35rem;
  --container-lg: 48rem;
  --container-xl: 64rem;
  --container-xxl: 80rem;   /* default page container */

  /* ----- Motion ----- *
   Calm, functional. 200ms ease for UI; gentle ease for reveals. No bounce. */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --duration-fast: 150ms; /* @kind other */
  --duration-base: 200ms; /* @kind other */
  --duration-slow: 400ms; /* @kind other */
}