/* ===========================================================================
   At The River — Effects: radii, shadows, borders, motion
   Soft, hand-made, unfussy. Nothing glossy; light like late-afternoon sun.
   =========================================================================== */

:root {
  /* Corner radii — gently rounded, never sharp, never pill-glossy.
     Photography frames use a slightly larger, softer radius. */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --radius-photo: 18px;

  /* Shadows — warm-tinted (brown, not blue-grey), low and diffuse, like
     shade under the eaves. Never a hard drop shadow. */
  --shadow-xs: 0 1px 2px rgba(56, 33, 19, 0.06);
  --shadow-sm: 0 2px 8px rgba(56, 33, 19, 0.08);
  --shadow-md: 0 10px 30px -12px rgba(56, 33, 19, 0.22);
  --shadow-lg: 0 24px 60px -20px rgba(33, 21, 12, 0.32);
  --shadow-photo: 0 30px 70px -30px rgba(33, 21, 12, 0.45);

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

  /* Protection gradient — laid over hero photos so light serif text stays
     legible. Warm dusk-to-transparent, bottom-weighted. */
  --scrim-bottom: linear-gradient(to top, rgba(33,21,12,0.72) 0%, rgba(33,21,12,0.30) 38%, rgba(33,21,12,0) 68%); /* @kind other */
  --scrim-full: linear-gradient(to bottom, rgba(33,21,12,0.34) 0%, rgba(33,21,12,0.10) 40%, rgba(33,21,12,0.55) 100%); /* @kind other */

  /* Motion — slow, natural easing. Things drift in like river current; they
     never bounce. */
  --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 */
  --dur-fast: 160ms;  /* @kind other */
  --dur: 320ms;       /* @kind other */
  --dur-slow: 620ms;  /* @kind other */

  /* Standard interaction transition */
  --transition: color var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur) var(--ease-out),
                transform var(--dur) var(--ease-out),
                opacity var(--dur) var(--ease-out);
}