/* =============================================================================
 * anim-tokens.css — motion design tokens for the Meat + Grocery POS.
 *
 * Loaded BEFORE app.css so that layout cascade still wins, but tokens are
 * available to anim-3d.css (which is loaded after app.css). All values are
 * tuned for a 60–120 Hz tablet/touchscreen and respect prefers-reduced-motion.
 * =========================================================================== */

:root {
    /* — Durations ----------------------------------------------------------- */
    --d-fast:  120ms;
    --d-mid:   240ms;
    --d-slow:  420ms;
    --d-stag:   60ms;            /* per-item stagger delay */

    /* — Easings ------------------------------------------------------------- */
    --ease-spring:    cubic-bezier(.34, 1.56, .64, 1);   /* overshoot */
    --ease-out-quint: cubic-bezier(.22, 1,    .36, 1);   /* decelerate */
    --ease-in-out:    cubic-bezier(.65, 0,    .35, 1);

    /* — 3D ------------------------------------------------------------------ */
    --perspective: 1200px;
    --tilt-max:        10deg;
    --lift-z:           8px;
    --press-z:          2px;

    /* — Depth tiers (drop shadows in increasing prominence) ------------------ */
    --depth-1: 0 1px 2px rgba(20, 24, 22, .08);
    --depth-2: 0 6px 14px -4px rgba(20, 24, 22, .18), 0 2px 4px rgba(20, 24, 22, .08);
    --depth-3: 0 16px 40px -10px rgba(20, 24, 22, .28), 0 4px 10px rgba(20, 24, 22, .12);
    --depth-press: inset 0 2px 6px rgba(20, 24, 22, .28);

    /* — Per-department glow halos (used on hover/active) -------------------- */
    --glow-meat:     0 0 24px rgba(159,  29, 42, .55), 0 0 6px rgba(159,  29, 42, .35);
    --glow-pork:     0 0 24px rgba(194,  65, 12, .50), 0 0 6px rgba(194,  65, 12, .30);
    --glow-chicken:  0 0 24px rgba(217, 119,  6, .50), 0 0 6px rgba(217, 119,  6, .30);
    --glow-seafood:  0 0 24px rgba(  8, 145,178, .55), 0 0 6px rgba(  8, 145,178, .30);
    --glow-deli:     0 0 24px rgba(161,  98,  7, .50), 0 0 6px rgba(161,  98,  7, .30);
    --glow-dairy:    0 0 24px rgba(250, 204, 21, .55), 0 0 6px rgba(250, 204, 21, .35);
    --glow-frozen:   0 0 26px rgba( 96, 165,250, .65), 0 0 8px rgba(255, 255,255, .40);
    --glow-bakery:   0 0 24px rgba(146,  64, 14, .50), 0 0 6px rgba(146,  64, 14, .30);
    --glow-produce:  0 0 24px rgba( 31, 122, 77, .55), 0 0 6px rgba( 31, 122, 77, .30);
    --glow-drygoods: 0 0 22px rgba(120, 113,108, .45), 0 0 6px rgba(120, 113,108, .25);
    --glow-beverages:0 0 24px rgba( 14, 165,233, .55), 0 0 6px rgba( 14, 165,233, .30);
    --glow-snacks:   0 0 24px rgba(183, 121, 31, .55), 0 0 6px rgba(183, 121, 31, .30);
    --glow-household:0 0 22px rgba(107, 114,128, .45), 0 0 6px rgba(107, 114,128, .25);
    --glow-personal_care: 0 0 24px rgba(219,  39,119, .50), 0 0 6px rgba(219,  39,119, .30);

    /* — Surface textures (data URIs so no extra HTTP requests) -------------- */
    --tex-butcher: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0.62  0 0 0 0 0.11  0 0 0 0 0.16  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    --tex-frost:   linear-gradient(125deg, rgba(255,255,255,.0) 30%, rgba(255,255,255,.55) 50%, rgba(255,255,255,.0) 70%);

    /* — Spark colors for the payment success burst ------------------------- */
    --spark-1: #ff6b6b;
    --spark-2: #ffd166;
    --spark-3: #06d6a0;
    --spark-4: #118ab2;
    --spark-5: #ef476f;
    --spark-6: #f9c80e;
}

/* Optional perf-lite escape hatch: body[data-perf="lite"] disables tilt+pulse */
body[data-perf="lite"] {
    --tilt-max: 0deg;
    --lift-z:   0px;
}