/* =====================================
   MEHRAZI PLAYER - CSS VARIABLES
   متغیرهای سفارشی برای مدیریت تم
   ===================================== */

:root {
    /* ===== رنگهای اصلی (بهینه شده با HSL) ===== */
    --mp-primary-h: 46;
    --mp-primary-s: 65%;
    --mp-primary-l: 52%;
    --mp-primary: hsl(var(--mp-primary-h), var(--mp-primary-s), var(--mp-primary-l));
    --mp-primary-hover: hsl(var(--mp-primary-h), var(--mp-primary-s), 60%);
    --mp-primary-light: hsla(var(--mp-primary-h), var(--mp-primary-s), var(--mp-primary-l), 0.18);
    --mp-primary-glow: hsla(var(--mp-primary-h), var(--mp-primary-s), var(--mp-primary-l), 0.5);
    --mp-primary-dark: hsl(var(--mp-primary-h), var(--mp-primary-s), 39%);

    --mp-secondary: #b0b0b0;
    --mp-secondary-hover: #d5d5d5;
    --mp-secondary-light: rgba(197, 197, 197, 0.18);

    --mp-accent: #8b5cf6;
    --mp-accent-hover: #a78bfa;
    --mp-accent-light: rgba(139, 92, 246, 0.18);

    /* ===== رنگهای وضعیت ===== */
    --mp-success: #10b981;
    --mp-success-light: rgba(16, 185, 129, 0.18);
    --mp-warning: #f59e0b;
    --mp-warning-light: rgba(245, 158, 11, 0.18);
    --mp-danger: #f87171;
    --mp-danger-light: rgba(239, 68, 68, 0.18);
    --mp-info: #3b82f6;
    --mp-info-light: rgba(59, 130, 246, 0.18);

    /* ===== پس‌زمینه ===== */
    --mp-bg-base: transparent;
    --mp-bg-base-alt: transparent;
    --mp-bg-elevated: transparent;
    --mp-bg-glass: rgba(255, 255, 255, 0.06);
    --mp-bg-glass-hover: rgba(255, 255, 255, 0.1);
    --mp-bg-glass-border: rgba(255, 255, 255, 0.12);
    --mp-bg-card: rgba(255, 255, 255, 0.05);
    --mp-bg-card-hover: rgba(255, 255, 255, 0.09);
    --mp-bg-overlay: rgba(0, 0, 0, 0.35);
    --mp-bg-transparent-light: rgba(255, 255, 255, 0.06);
    --mp-bg-transparent-medium: rgba(255, 255, 255, 0.08);
    --mp-bg-transparent-dark: rgba(0, 0, 0, 0.4);

    /* ===== متن (بهبود contrast برای accessibility) ===== */
    --mp-text: #ffffff;
    --mp-text-muted: #b0b0b0;
    --mp-text-dark: #020617;
    --mp-text-inverse: #000000;

    /* ===== آیکون دکمه ===== */
    --mp-btn-icon: #ffffff;
    --mp-btn-icon-hover: #d4af37;
    --mp-btn-icon-muted: #6b7280;

    /* ===== حاشیه ===== */
    --mp-border: rgba(148, 163, 184, 0.2);
    --mp-border-hover: rgba(212, 175, 55, 0.85);
    --mp-border-focus: rgba(212, 175, 55, 0.85);
    --mp-border-light: rgba(255, 255, 255, 0.1);
    --mp-border-dark: rgba(0, 0, 0, 0.2);

    /* ===== فوکوس ===== */
    --mp-focus-ring: 2px solid var(--mp-primary);
    --mp-focus-ring-offset: 2px;
    --mp-focus-ring-color: rgba(212, 175, 55, 0.35);
    --mp-focus-shadow: 0 0 0 4px rgba(212, 175, 55, 0.25);

    /* ===== محو کردن ===== */
    --mp-blur: 20px;
    --mp-blur-strong: 28px;
    --mp-blur-light: 10px;

    /* ===== شعاع گوشه ===== */
    --mp-radius: 16px;
    --mp-radius-sm: 10px;
    --mp-radius-lg: 20px;
    --mp-radius-xl: 24px;
    --mp-radius-full: 999px;

    /* ===== سایه ===== */
    --mp-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 24px 48px -12px rgba(0, 0, 0, 0.5);
    --mp-shadow-sm: 0 0 0 1px rgba(255, 255, 255, 0.03), 0 4px 12px rgba(0, 0, 0, 0.35);
    --mp-shadow-md: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 12px 24px rgba(0, 0, 0, 0.4);
    --mp-shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 20px 40px rgba(0, 0, 0, 0.45);
    --mp-shadow-xl: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 30px 60px rgba(0, 0, 0, 0.5);
    --mp-shadow-glass: 0 0 0 1px rgba(255, 255, 255, 0.06) inset, 0 8px 32px -8px rgba(0, 0, 0, 0.4);
    --mp-shadow-focus: 0 0 0 1px var(--mp-border-focus), 0 4px 16px rgba(0, 0, 0, 0.25);

    /* ===== سایه کارت ===== */
    --mp-card-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 4px 24px -4px rgba(0, 0, 0, 0.4);
    --mp-card-shadow-hover: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 16px 40px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(212, 175, 55, 0.08);

    /* ===== انتقال ===== */
    --mp-transition: all 0.25s ease;
    --mp-transition-fast: all 0.15s ease;
    --mp-transition-slow: all 0.4s ease;
    --mp-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --mp-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --mp-transition-transform: transform 0.2s ease;
    --mp-transition-colors: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;

    /* ===== فونت ===== */
    --mp-font: inherit;
    --mp-font-mono: 'Courier New', monospace;

    /* ===== اندازه دکمه ===== */
    --mp-btn-radius-sm: 8px;
    --mp-btn-radius-md: 12px;
    --mp-btn-radius-lg: 50%;
    --mp-btn-radius-pill: 999px;
    --mp-btn-hover-bg: rgba(255, 255, 255, 0.08);
    --mp-btn-active-scale: 0.96;
    --mp-btn-hover-scale: 1.05;

    /* ===== اندازه لمسی ===== */
    --mp-touch-min: 44px;
    --mp-touch-target: 44px;

    /* ===== Responsive Design Tokens (Single Source of Truth) ===== */
    --mp-space-xs: clamp(0.25rem, 0.5vw, 0.5rem);
    --mp-space-sm: clamp(0.5rem, 1vw, 0.75rem);
    --mp-space-md: clamp(0.75rem, 1.5vw, 1rem);
    --mp-space-lg: clamp(1rem, 2vw, 1.5rem);
    --mp-space-xl: clamp(1.5rem, 3vw, 2rem);
    --mp-space-2xl: clamp(2rem, 4vw, 3rem);

    --mp-container-sm: min(100%, 640px);
    --mp-container-md: min(100%, 768px);
    --mp-container-lg: min(100%, 1024px);
    --mp-container-xl: min(100%, 1280px);
    --mp-container-2xl: min(100%, 1536px);

    --mp-bp-sm: 640px;
    --mp-bp-md: 768px;
    --mp-bp-lg: 1024px;
    --mp-bp-xl: 1280px;

    --mp-flyout-panel-left: 50%;
    --mp-flyout-panel-right: auto;
    --mp-flyout-panel-x: -50%;
    --mp-flyout-panel-width: min(90vw, 20rem);
    --mp-flyout-panel-max-width: calc(100vw - 1rem);
    --mp-speed-presets-cols: 3;

    /* ===== شعاع کارت ===== */
    --mp-card-radius: 14px;
    --mp-card-radius-sm: 10px;
    --mp-card-radius-lg: 20px;

    /* ===== Z-Index ===== */
    --mp-z-base: 0;
    --mp-z-card: 1;
    --mp-z-elevated: 10;
    --mp-z-controls: 20;
    --mp-z-overlay: 30;
    --mp-z-tooltip: 40;
    --mp-z-spinner: 50;
    --mp-z-overlay-high: 60;
    --mp-z-notification: 100;
    --mp-z-modal: 10000;

    /* ===== فاصله ===== */
    --mp-space-1: 0.25rem;
    --mp-space-2: 0.5rem;
    --mp-space-3: 0.75rem;
    --mp-space-4: 1rem;
    --mp-space-5: 1.25rem;
    --mp-space-6: 1.5rem;
    --mp-space-8: 2rem;
    --mp-space-10: 2.5rem;
    --mp-space-12: 3rem;
    --mp-space-16: 4rem;

    /* ===== اندازه متن ===== */
    --mp-text-xs: 0.75rem;
    --mp-text-sm: 0.875rem;
    --mp-text-base: 1rem;
    --mp-text-lg: 1.125rem;
    --mp-text-xl: 1.25rem;
    --mp-text-2xl: 1.5rem;
    --mp-text-3xl: 1.875rem;
    --mp-text-4xl: 2.25rem;

    /* ===== Component Sizes ===== */
    --mp-btn-sm: 2rem;
    --mp-btn-md: 2.5rem;
    --mp-btn-lg: 3rem;

    /* ===== ارتفاع خط ===== */
    --mp-leading-none: 1;
    --mp-leading-tight: 1.25;
    --mp-leading-normal: 1.5;
    --mp-leading-relaxed: 1.75;
    --mp-leading-loose: 2;

    /* ===== وزن فونت ===== */
    --mp-font-thin: 100;
    --mp-font-light: 300;
    --mp-font-normal: 400;
    --mp-font-medium: 500;
    --mp-font-semibold: 600;
    --mp-font-bold: 700;
    --mp-font-extrabold: 800;
    --mp-font-black: 900;

    /* ===== عرض ===== */
    --mp-max-width-xs: 20rem;
    --mp-max-width-sm: 24rem;
    --mp-max-width-md: 28rem;
    --mp-max-width-lg: 32rem;
    --mp-max-width-xl: 36rem;
    --mp-max-width-2xl: 42rem;
    --mp-max-width-3xl: 48rem;
    --mp-max-width-4xl: 56rem;
    --mp-max-width-5xl: 64rem;
    --mp-max-width-6xl: 72rem;
    --mp-max-width-7xl: 80rem;
    --mp-max-width-full: 100%;

    /* ===== آرشیو ===== */
    --mp-archive-sticky-offset: 80px;
    --mp-header-offset: 80px;

    /* ===== ویدئو ===== */
    --mp-video-overlay-bg: rgba(0, 0, 0, 0.35);
    --mp-video-overlay-grad: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
    --mp-video-title-grad: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
    --mp-video-control-bg: rgba(255, 255, 255, 0.06);
    --mp-video-control-border: rgba(255, 255, 255, 0.08);
    --mp-video-control-blur: 20px;
    --mp-video-btn-icon: var(--mp-text);
    --mp-video-btn-icon-hover: var(--mp-primary);
    --mp-video-text: var(--mp-text);
    --mp-video-text-muted: var(--mp-text-muted);

    /* ===== زیرنویس ===== */
    --mp-caption-bg: rgba(0, 0, 0, 0.85);
    --mp-caption-color: #fff;
    --mp-caption-size: 1.1em;
    --mp-caption-lineheight: 1.4;
    --mp-caption-shadow: 0 2px 4px rgba(0,0,0,0.6);

    /* ===== UI Enhancement Tokens ===== */
    --mp-primary-gradient: linear-gradient(135deg, #d4af37 0%, #f5d36e 100%);
    --mp-glass-gradient: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
    --mp-shadow-elevated: 0 20px 60px -15px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.08);
    --mp-shadow-floating: 0 30px 80px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.1);

    /* ===== Responsive Tokens ===== */
    --mp-rs-gutter: clamp(12px, 2.1vw, 24px);
    --mp-rs-card-gap: clamp(12px, 1.8vw, 24px);
    --mp-rs-card-radius: 18px;
    --mp-rs-card-title: clamp(0.95rem, 1.05vw, 1.08rem);
    --mp-rs-card-meta: clamp(0.74rem, 0.88vw, 0.84rem);
    --mp-rs-player-max: 1240px;
    --mp-rs-player-max-compact: 1140px;
    --mp-rs-archive-max: 1400px;
}

@media (min-width: 640px) {
    :root {
        --mp-flyout-panel-left: auto;
        --mp-flyout-panel-right: 0;
        --mp-flyout-panel-x: 0;
        --mp-flyout-panel-width: 16rem;
        --mp-flyout-panel-max-width: min(24rem, 90vw);
        --mp-speed-presets-cols: 4;
    }
}

@media (min-width: 768px) {
    :root {
        --mp-header-offset: 100px;
    }
}

/* ===== تم روشن ===== */
@media (prefers-color-scheme: light) {
    :root {
        --mp-bg-base: #f8f9fa;
        --mp-bg-base-alt: #ffffff;
        --mp-bg-elevated: #ffffff;
        --mp-bg-glass: rgba(255, 255, 255, 0.9);
        --mp-bg-glass-hover: rgba(255, 255, 255, 0.95);
        --mp-bg-card: rgba(255, 255, 255, 0.95);
        --mp-bg-card-hover: rgba(255, 255, 255, 1);
        --mp-bg-overlay: rgba(0, 0, 0, 0.5);

        --mp-text: #1a1a2e;
        --mp-text-muted: #666680;
        --mp-text-dark: #000000;
        --mp-text-inverse: #ffffff;

        --mp-border: rgba(0, 0, 0, 0.08);
        --mp-border-hover: rgba(212, 175, 55, 0.5);
        --mp-border-light: rgba(0, 0, 0, 0.05);
        --mp-border-dark: rgba(0, 0, 0, 0.15);

        --mp-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
        --mp-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
        --mp-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.1);
        --mp-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);
        --mp-shadow-xl: 0 15px 40px rgba(0, 0, 0, 0.15);

        --mp-card-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
        --mp-card-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.12);
    }
}

/* ===== تم سفارشی - آبی ===== */
[data-theme="blue"] {
    --mp-primary: #3b82f6;
    --mp-primary-hover: #2563eb;
    --mp-primary-light: rgba(59, 130, 246, 0.18);
    --mp-primary-glow: rgba(59, 130, 246, 0.5);
}

/* ===== تم سفارشی - بنفش ===== */
[data-theme="purple"] {
    --mp-primary: #8b5cf6;
    --mp-primary-hover: #7c3aed;
    --mp-primary-light: rgba(139, 92, 246, 0.18);
    --mp-primary-glow: rgba(139, 92, 246, 0.5);
}

/* ===== تم سفارشی - سبز ===== */
[data-theme="green"] {
    --mp-primary: #10b981;
    --mp-primary-hover: #059669;
    --mp-primary-light: rgba(16, 185, 129, 0.18);
    --mp-primary-glow: rgba(16, 185, 129, 0.5);
}

/* ===== تم سفارشی - قرمز ===== */
[data-theme="red"] {
    --mp-primary: #ef4444;
    --mp-primary-hover: #dc2626;
    --mp-primary-light: rgba(239, 68, 68, 0.18);
    --mp-primary-glow: rgba(239, 68, 68, 0.5);
}

/* ===== تم سفارشی - نارنجی ===== */
[data-theme="orange"] {
    --mp-primary: #f59e0b;
    --mp-primary-hover: #d97706;
    --mp-primary-light: rgba(245, 158, 11, 0.18);
    --mp-primary-glow: rgba(245, 158, 11, 0.5);
}

/* ===== تم سفارشی - صورتی ===== */
[data-theme="pink"] {
    --mp-primary: #ec4899;
    --mp-primary-hover: #db2777;
    --mp-primary-light: rgba(236, 72, 153, 0.18);
    --mp-primary-glow: rgba(236, 72, 153, 0.5);
}

/* ===== حالت کنتراست بالا ===== */
@media (prefers-contrast: high) {
    :root {
        --mp-border: rgba(255, 255, 255, 0.4);
        --mp-border-hover: rgba(212, 175, 55, 1);
        --mp-text-muted: #d0d0d0;
    }
}

/* ===== کاهش حرکت ===== */
@media (prefers-reduced-motion: reduce) {
    :root {
        --mp-transition: none;
        --mp-transition-fast: none;
        --mp-transition-slow: none;
    }
}