/* ==========================================================================
   (De)Scaling Madrid — Spacing, radius, shadow, motion
   The brand language is flat & print-like: geometric shapes (diamonds,
   chevrons), crisp edges, very restrained shadows.
   ========================================================================== */

:root {
  /* Spacing scale (4px base) */
  --sp-0:  0; /* @kind spacing */
  --sp-1:  0.25rem;   /* 4  */
  --sp-2:  0.5rem;    /* 8  */
  --sp-3:  0.75rem;   /* 12 */
  --sp-4:  1rem;      /* 16 */
  --sp-5:  1.5rem;    /* 24 */
  --sp-6:  2rem;      /* 32 */
  --sp-7:  3rem;      /* 48 */
  --sp-8:  4rem;      /* 64 */
  --sp-9:  6rem;      /* 96 */
  --sp-10: 8rem;      /* 128 */

  /* Radii — kept tight; the brand leans geometric, not rounded */
  --r-none: 0; /* @kind radius */
  --r-xs:   3px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-pill: 999px;

  /* Borders */
  --bw-hair:   1px;
  --bw-rule:   2px;
  --bw-strong: 3px;

  /* Shadows — minimal. Mostly flat; a single soft lift for web cards. */
  --shadow-none: none;
  --shadow-sm:   0 1px 2px rgba(0, 0, 80, 0.06);
  --shadow-card: 0 10px 30px -12px rgba(0, 0, 90, 0.22);
  --shadow-pop:  0 24px 60px -20px rgba(0, 0, 90, 0.35);

  /* Motion — quick, confident, no bounce */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-inout: cubic-bezier(0.65, 0.05, 0.36, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   240ms; /* @kind other */
  --dur-slow:   420ms; /* @kind other */

  /* Layout */
  --maxw-prose:   62ch; /* @kind other */
  --maxw-content: 1180px; /* @kind other */
  --gutter:       clamp(1.25rem, 4vw, 4rem); /* @kind other */
}