/* ============================================================
   Wall & Floor — Spacing, radii, borders, shadows, motion
   Architectural feel: sharp small radii, generous section
   rhythm, restrained shadows, one signature diagonal cut.
   ============================================================ */
:root {
  /* ---- Spacing (4px base) ---- */
  --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 */

  /* section vertical rhythm */
  --section-y: clamp(4rem, 2rem + 8vw, 9rem); /* @kind spacing */
  --gutter:    clamp(1.25rem, 0.5rem + 3vw, 3rem); /* @kind spacing */
  --maxw:      1240px; /* @kind spacing */
  --maxw-text: 62ch; /* @kind spacing */

  /* ---- Radii (architectural, mostly sharp) ---- */
  --radius-xs: 2px;
  --radius-sm: 4px;   /* buttons, inputs */
  --radius-md: 8px;   /* image tiles */
  --radius-lg: 14px;  /* large media cards */
  --radius-pill: 999px;

  /* ---- Borders ---- */
  --bw:       1px; /* @kind spacing */
  --bw-thick: 2px; /* @kind spacing */

  /* ---- Shadows (restrained, warm) ---- */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.35);
  --shadow-card: 0 22px 55px -28px rgba(0,0,0,0.7);
  --shadow-lift: 0 34px 80px -30px rgba(0,0,0,0.78);
  --shadow-glow-red: 0 14px 40px -14px rgba(196,20,27,0.45);

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:   160ms; /* @kind other */
  --dur:        280ms; /* @kind other */
  --dur-slow:   520ms; /* @kind other */

  /* ---- Signature diagonal clip (brochure motif) ---- */
  --diagonal: polygon(14% 0, 100% 0, 100% 100%, 0 100%); /* @kind other */
}