/* OctagonSquare elevation + motion. Soft, warm shadows tinted with Ink,
   never neutral grey. Motion clarifies, it does not perform: calm and quick. */
:root {
  /* Elevation: shadows tinted with Ink, low and soft */
  --os-shadow-card: 0 4px 16px rgba(54, 56, 46, 0.12);
  --os-shadow-card-hover: 0 10px 28px rgba(54, 56, 46, 0.16);
  --os-shadow-raised: 0 16px 40px rgba(54, 56, 46, 0.20);
  --os-shadow-focus: 0 0 0 2px var(--os-paper), 0 0 0 4px var(--os-blue);

  /* Photo legibility overlay: Ink to transparent, top-down or bottom-up */
  --os-overlay-photo: linear-gradient(
    180deg,
    rgba(54, 56, 46, 0) 0%,
    rgba(54, 56, 46, 0.10) 40%,
    rgba(54, 56, 46, 0.78) 100%
  ); /* @kind other */
  /* Warm wash: fixed brand filter on all photography */
  --os-warm-wash: linear-gradient(
    160deg,
    rgba(240, 100, 73, 0.18) 0%,
    rgba(247, 177, 164, 0.10) 45%,
    rgba(54, 56, 46, 0.06) 100%
  ); /* @kind other */

  /* Motion */
  --os-duration: 200ms;        /* @kind other */
  --os-duration-fast: 150ms;   /* @kind other */
  --os-ease-out: cubic-bezier(0.16, 1, 0.3, 1);     /* @kind other */
  --os-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */

  /* Scroll-reveal rise distance */
  --os-rise: 12px;
}