/* ============================================================
   Mobiocasión · Elevation, borders, motion
   Soft, warm-tinted shadows on bright surfaces.
   ============================================================ */
:root {
  /* Shadows — warm ink tint, never pure black */
  --shadow-xs: 0 1px 2px rgba(32, 25, 22, 0.06);
  --shadow-sm: 0 1px 3px rgba(32, 25, 22, 0.08), 0 1px 2px rgba(32, 25, 22, 0.04);
  --shadow-md: 0 4px 14px rgba(32, 25, 22, 0.09);
  --shadow-lg: 0 12px 30px rgba(32, 25, 22, 0.13);
  --shadow-xl: 0 22px 50px rgba(32, 25, 22, 0.16);

  /* Focus ring — lime */
  --ring-brand: 0 0 0 3px rgba(194, 213, 46, 0.5);
  --ring-danger: 0 0 0 3px rgba(216, 54, 43, 0.32);

  /* Borders */
  --border-width: 1px;
  --border: var(--border-width) solid var(--border-default);
  --border-hairline: 1px solid var(--border-subtle);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);   /* @kind other */
  --ease-in-out: cubic-bezier(0.45, 0.05, 0.55, 0.95); /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast: 120ms;  /* @kind other */
  --dur: 180ms;       /* @kind other */
  --dur-slow: 280ms;  /* @kind other */

  /* Z-index */
  --z-base: 0;        /* @kind other */
  --z-sticky: 100;    /* @kind other */
  --z-header: 200;    /* @kind other */
  --z-dropdown: 300;  /* @kind other */
  --z-overlay: 400;   /* @kind other */
  --z-modal: 500;     /* @kind other */
  --z-toast: 600;     /* @kind other */
}