/* ============================================================
   Open Props — Curated design tokens for PhotoAsso
   Source: https://open-props.style (MIT)
   Only shadows, easings, and animations — adapted for
   [data-theme] instead of prefers-color-scheme.
   ============================================================ */

:root {
    /* ── Shadows ─────────────────────────────────────────────── */
    --shadow-color: 220 3% 15%;
    --shadow-strength: 1%;
    --shadow-strength-3: calc(var(--shadow-strength) + 2%);
    --shadow-strength-4: calc(var(--shadow-strength) + 3%);
    --shadow-strength-5: calc(var(--shadow-strength) + 4%);
    --shadow-strength-6: calc(var(--shadow-strength) + 5%);
    --shadow-strength-7: calc(var(--shadow-strength) + 6%);
    --shadow-strength-8: calc(var(--shadow-strength) + 7%);
    --shadow-strength-10: calc(var(--shadow-strength) + 9%);
    --inner-shadow-highlight: inset 0 -.5px 0 0 #fff, inset 0 .5px 0 0 rgb(0 0 0 / 6.7%);
    --shadow-1: 0 1px 2px -1px hsl(var(--shadow-color) / var(--shadow-strength-10));
    --shadow-2: 0 3px 5px -2px hsl(var(--shadow-color) / var(--shadow-strength-4)),
                0 7px 14px -5px hsl(var(--shadow-color) / var(--shadow-strength-6));
    --shadow-3: 0 -1px 3px 0 hsl(var(--shadow-color) / var(--shadow-strength-3)),
                0 1px 2px -5px hsl(var(--shadow-color) / var(--shadow-strength-3)),
                0 2px 5px -5px hsl(var(--shadow-color) / var(--shadow-strength-5)),
                0 4px 12px -5px hsl(var(--shadow-color) / var(--shadow-strength-6)),
                0 12px 15px -5px hsl(var(--shadow-color) / var(--shadow-strength-8));
    --shadow-4: 0 -2px 5px 0 hsl(var(--shadow-color) / var(--shadow-strength-3)),
                0 1px 1px -2px hsl(var(--shadow-color) / var(--shadow-strength-4)),
                0 2px 2px -2px hsl(var(--shadow-color) / var(--shadow-strength-4)),
                0 5px 5px -2px hsl(var(--shadow-color) / var(--shadow-strength-5)),
                0 9px 9px -2px hsl(var(--shadow-color) / var(--shadow-strength-6)),
                0 16px 16px -2px hsl(var(--shadow-color) / var(--shadow-strength-7));
    --inner-shadow-0: inset 0 0 0 1px hsl(var(--shadow-color) / var(--shadow-strength-10));
    --inner-shadow-1: inset 0 1px 2px 0 hsl(var(--shadow-color) / var(--shadow-strength-10)), var(--inner-shadow-highlight);
    --inner-shadow-2: inset 0 1px 4px 0 hsl(var(--shadow-color) / var(--shadow-strength-10)), var(--inner-shadow-highlight);

    /* ── Easings ─────────────────────────────────────────────── */
    --ease-1: cubic-bezier(.25, 0, .5, 1);
    --ease-2: cubic-bezier(.25, 0, .4, 1);
    --ease-3: cubic-bezier(.25, 0, .3, 1);
    --ease-4: cubic-bezier(.25, 0, .2, 1);
    --ease-5: cubic-bezier(.25, 0, .1, 1);
    --ease-in-1: cubic-bezier(.25, 0, 1, 1);
    --ease-in-2: cubic-bezier(.50, 0, 1, 1);
    --ease-in-3: cubic-bezier(.70, 0, 1, 1);
    --ease-out-1: cubic-bezier(0, 0, .75, 1);
    --ease-out-2: cubic-bezier(0, 0, .50, 1);
    --ease-out-3: cubic-bezier(0, 0, .3, 1);
    --ease-out-4: cubic-bezier(0, 0, .1, 1);
    --ease-out-5: cubic-bezier(0, 0, 0, 1);
    --ease-in-out-1: cubic-bezier(.1, 0, .9, 1);
    --ease-in-out-2: cubic-bezier(.3, 0, .7, 1);
    --ease-in-out-3: cubic-bezier(.5, 0, .5, 1);
    --ease-elastic-out-1: cubic-bezier(.5, .75, .75, 1.25);
    --ease-elastic-out-2: cubic-bezier(.5, 1, .75, 1.25);
    --ease-elastic-out-3: cubic-bezier(.5, 1.25, .75, 1.25);
    --ease-spring-1: cubic-bezier(.5, 1.25, .75, 1.25);
    --ease-spring-2: cubic-bezier(.5, 1.5, .75, 1.25);
    --ease-bounce-1: cubic-bezier(.5, .75, .75, 1.25);
    --ease-bounce-2: cubic-bezier(.5, 1, .75, 1.25);

    /* ── Animation keyframes refs ────────────────────────────── */
    --animation-fade-in: fade-in .3s var(--ease-3);
    --animation-scale-up: scale-up .3s var(--ease-3);
    --animation-slide-in-up: slide-in-up .3s var(--ease-3);
    --animation-spin: spin 2s linear infinite;
}

/* Dark theme shadow adaptation */
[data-theme="dark"] {
    --shadow-color: 220 40% 2%;
    --shadow-strength: 25%;
    --inner-shadow-highlight: inset 0 -.5px 0 0 hsl(0deg 0% 100% / 6.7%),
                              inset 0 .5px 0 0 rgb(0 0 0 / 46.7%);
}

/* ── Keyframes ───────────────────────────────────────────────── */
@keyframes fade-in { to { opacity: 1; } }

@keyframes scale-up { to { transform: scale(1.25); } }

@keyframes slide-in-up { from { transform: translateY(100%); } }

@keyframes spin { to { transform: rotate(1turn); } }

@keyframes pulse { 50% { opacity: .6; } }