/* ============================================================
   Villaboix — Radii, borders, shadows, motion
   Brand note: the manual forbids shadows on the LOGO itself
   ("No colocar sombra"). UI surfaces may use soft, restrained
   shadows — keep them subtle and warm.
   ============================================================ */
:root {
  /* Radii — measured, lightly rounded; the brand is refined, not playful */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* Border widths */
  --border-hairline: 1px;
  --border-thick: 2px;

  /* Shadows — warm-tinted, low spread */
  --shadow-xs: 0 1px 2px rgba(58, 10, 16, 0.06);
  --shadow-sm: 0 2px 8px rgba(58, 10, 16, 0.07);
  --shadow-md: 0 8px 24px rgba(58, 10, 16, 0.08);
  --shadow-lg: 0 18px 48px rgba(58, 10, 16, 0.12);
  --shadow-focus: 0 0 0 3px rgba(203, 37, 56, 0.28);

  /* Motion — calm, professional; ease, no bounce */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --duration-fast: 120ms; /* @kind other */
  --duration-base: 200ms; /* @kind other */
  --duration-slow: 360ms; /* @kind other */
}