/* =========================================================================
   Design system — what every element and block shares (src/ds/README.md).
   Linked by every page right after the shared stylesheets, before the
   elements (src/ds/elements/*.css) and blocks (src/ds/blocks/*.css), which
   the build links after it automatically.

   Values come from tokens.css (Figma variables). The motion is the old
   prototype's (CLAUDE.md: motion and hovers stay as they were), named here
   once so the elements and blocks read the same timings.
   ========================================================================= */
:root {
  /* buttons and round buttons go ink: .12s linear (old home.css) */
  --ds-ink-duration: .12s;
  --ds-ink-ease: linear;
  /* cards: the title recolours over .25s, the outline over .512s, the photo
     zooms over 1.2s (old home.css) */
  --ds-hover-ease: cubic-bezier(.53, .2, 0, 1);
  --ds-zoom-ease: cubic-bezier(.22, 1, .36, 1);
  --ds-title-duration: .25s;
  --ds-outline-duration: .512s;
  --ds-zoom-duration: 1.2s;
  --ds-zoom: 1.04;
  /* the old card outline: 1px of ink at 12.5% (no Figma variable is 12.5%) */
  --ds-outline: color-mix(in srgb, var(--color-black) 12.5%, transparent);
}