/* ============================================================
   SLATE - Effects: shadows, motion, focus, texture
   Slate is FLAT. Shadows are rare and hard-edged, not soft glows.
   Motion is quick + confident: short fades, sharp easing, no bounce.
   ============================================================ */
:root {
  /* -- Shadows - used sparingly; brand favours flat + rules -- */
  --shadow-none: none;
  --shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.4);
  --shadow-card: 0 12px 40px -12px rgba(0, 0, 0, 0.7);
  --shadow-pop: 0 24px 70px -20px rgba(0, 0, 0, 0.85);
  /* hard offset "print" shadow - block sits behind, no blur */
  --shadow-block: 8px 8px 0 var(--ink-true);
  --shadow-block-acid: 8px 8px 0 var(--acid);

  /* -- Focus -------------------------------------- */
  --focus-width: 2px;   /* @kind other */
  --focus-offset: 2px;  /* @kind other */
  --focus-ring-shadow: 0 0 0 var(--focus-offset) var(--bg),
                       0 0 0 calc(var(--focus-offset) + var(--focus-width)) var(--acid);

  /* -- Motion -------------------------------------- */
  --dur-fast: 120ms;   /* @kind other */
  --dur-base: 200ms;   /* @kind other */
  --dur-slow: 360ms;   /* @kind other */
  --dur-reveal: 600ms;     /* @kind other */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-snap: cubic-bezier(0.2, 0.8, 0.2, 1);  /* @kind other */

  /* -- Image treatment ------------------------------
     Brand imagery skews high-contrast B&W with an acid wash on
     hover/feature. Apply these filters to <img> via utility.   */
  --img-bw: grayscale(1) contrast(1.08);  /* @kind other */
  --img-duo-overlay: color-mix(in srgb, var(--acid) 18%, transparent); /* @kind other */
  --grain-opacity: 0.06;  /* @kind other */
}

/* -- Reusable utility primitives (optional helpers) -------- */
.slate-focus:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-shadow);
}

.slate-img-bw {
  filter: var(--img-bw);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;   /* @kind other */
    --dur-base: 0ms;   /* @kind other */
    --dur-slow: 0ms;   /* @kind other */
    --dur-reveal: 0ms; /* @kind other */
  }
}