/**
 * PVIP Design System - CSS Custom Properties
 * Dark theme consistent with model-onboarding plugin
 */

:root {
    /* Backgrounds */
    --pvip-bg-dark: #000000;
    --pvip-bg-card: #0a0a0a;
    --pvip-bg-elevated: #1a1a1a;
    --pvip-bg-surface: #2a2a2a;
    --pvip-border: #262626;

    /* Brand */
    --pvip-primary: #e91e63;
    --pvip-primary-light: #f48fb1;
    --pvip-primary-dark: #c2185b;

    /* Actions */
    --pvip-like: #4caf50;
    --pvip-like-glow: rgba(76, 175, 80, 0.3);
    --pvip-dislike: #f44336;
    --pvip-dislike-glow: rgba(244, 67, 54, 0.3);
    --pvip-hyped: #ffc107;
    --pvip-hyped-glow: rgba(255, 193, 7, 0.3);

    /* Text */
    --pvip-text: #ffffff;
    --pvip-text-secondary: #b0b0b0;
    --pvip-text-muted: #666666;

    /* Spacing */
    --pvip-xs: 4px;
    --pvip-sm: 8px;
    --pvip-md: 16px;
    --pvip-lg: 24px;
    --pvip-xl: 32px;
    --pvip-2xl: 48px;

    /* Radius */
    --pvip-radius-sm: 8px;
    --pvip-radius-md: 12px;
    --pvip-radius-lg: 16px;
    --pvip-radius-full: 9999px;

    /* Shadows */
    --pvip-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    --pvip-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);

    /* Timing */
    --pvip-fast: 150ms ease;
    --pvip-base: 300ms ease;
    --pvip-slow: 500ms ease;

    /* Z-index */
    --pvip-z-card: 1;
    --pvip-z-overlay: 10;
    --pvip-z-controls: 50;
    --pvip-z-nav: 100;
    --pvip-z-toast: 10000;

    /* Safe areas (iOS notch) */
    --pvip-safe-top: env(safe-area-inset-top, 0px);
    --pvip-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ===== Low Motion Mode ===== */
@media (prefers-reduced-motion: reduce) {
    :root {
        --pvip-fast: 0ms ease;
        --pvip-base: 0ms ease;
        --pvip-slow: 0ms ease;
    }
}

/* User-toggled low motion (persisted via JS) */
.pvip-low-motion,
.pvip-low-motion * {
    --pvip-fast: 0ms ease !important;
    --pvip-base: 0ms ease !important;
    --pvip-slow: 0ms ease !important;
    animation-duration: 0ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0ms !important;
    scroll-behavior: auto !important;
}