/**
 * Shared design tokens for the three shop views (list, grid, slider).
 *
 * The accent is the colour the merchant already picked in Settings; each view
 * prints it into --wpgv-accent (and its rgb triplet, for tints) next to the
 * inline rules that colour buttons and borders. Everything here is a fallback,
 * so a site that never saved a colour still gets the plugin's own palette.
 */

.wpgv-giftitem-wrapper,
#voucher-multistep-form,
#giftvoucher-template {
    --wpgv-accent: #81c6a9;
    --wpgv-accent-rgb: 129, 198, 169;
    --wpgv-accent-contrast: #ffffff;

    --wpgv-ink: #1d2d4b;
    --wpgv-ink-soft: #55617a;
    --wpgv-muted: #78839a;
    --wpgv-surface: #ffffff;
    --wpgv-surface-sunken: #f6f7fb;
    --wpgv-border: #e4e8f0;
    --wpgv-border-strong: #cfd6e4;

    --wpgv-radius: 16px;
    --wpgv-radius-sm: 10px;
    --wpgv-radius-pill: 999px;

    --wpgv-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .08);
    --wpgv-shadow-md: 0 6px 18px rgba(16, 24, 40, .08);
    --wpgv-shadow-lg: 0 14px 34px rgba(16, 24, 40, .12);

    --wpgv-ring: 0 0 0 3px rgba(var(--wpgv-accent-rgb), .35);
}

/* Focus is never removed, only replaced: keyboard users need to see where they are. */
.wpgv-giftitem-wrapper :focus-visible,
#voucher-multistep-form :focus-visible,
#giftvoucher-template :focus-visible {
    outline: 2px solid var(--wpgv-accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

    .wpgv-giftitem-wrapper *,
    #voucher-multistep-form *,
    #giftvoucher-template * {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}