/* ============================================================================
   tokens/transitions.css — Transition Design Tokens

   Subtle, refined animation timing for modern feel.
   Principle: Animations should feel responsive but not distracting.
   ============================================================================ */

:root {
    /* Duration Scale - Subtle and quick */
    --duration-instant: 100ms;
    --duration-fast: 150ms;
    --duration-base: 180ms;
    --duration-slow: 250ms;
    --duration-slower: 350ms;

    /* Easing Functions - Smooth, natural feel */
    --ease-default: cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Transition Presets */
    --transition-instant: var(--duration-instant) var(--ease-default);
    --transition-fast: var(--duration-fast) var(--ease-default);
    --transition-base: var(--duration-base) var(--ease-default);
    --transition-slow: var(--duration-slow) var(--ease-out);
}