/**
 * Mobile Phone Showcase - Unified CSS Variables
 * مركز متغيرات CSS الموحدة للهوية البصرية
 * 
 * This file contains all centralized color variables used across the plugin
 * to ensure visual consistency throughout the website.
 */

:root {
    /* ========================================
       لون التمييز والهوية - الأصفر الخردلي
       Accent Color - Mustard Yellow
       ======================================== */
    --mps-accent: #fbc02d;
    --mps-accent-light: #fff59d;
    --mps-accent-dark: #c49000;

    /* ========================================
       اللون الأساسي - الرمادي الداكن/الفحمي
       Primary Color - Dark Grey/Charcoal
       ======================================== */
    --mps-primary: #2d3436;
    --mps-primary-light: #636e72;
    --mps-primary-dark: #1a1a1a;

    /* ========================================
       الخلفيات والبطاقات
       Backgrounds & Cards
       ======================================== */
    --mps-bg: #f4f7f6;
    --mps-bg-light: #f8fafb;
    --mps-bg-soft: #fafbfc;
    --mps-card-bg: #ffffff;

    /* ========================================
       النصوص
       Text Colors
       ======================================== */
    --mps-text-primary: #2d3436;
    --mps-text-secondary: #636e72;
    --mps-text-light: #95a5a6;
    --mps-text-muted: #64748b;

    /* ========================================
       الحدود والفواصل
       Borders & Dividers
       ======================================== */
    --mps-border: #e0e0e0;
    --mps-border-light: #f0f0f0;
    --mps-border-soft: #e5e7eb;

    /* ========================================
       الظلال
       Shadows
       ======================================== */
    --mps-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --mps-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --mps-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
    --mps-shadow-hover: 0 10px 25px rgba(0, 0, 0, 0.08);

    /* ========================================
       التحولات والانتقالات
       Transitions
       ======================================== */
    --mps-transition: all 0.3s ease;
    --mps-transition-fast: all 0.2s ease;

    /* ========================================
       الزوايا المستديرة
       Border Radius
       ======================================== */
    --mps-radius-sm: 8px;
    --mps-radius-md: 12px;
    --mps-radius-lg: 15px;
    --mps-radius-xl: 20px;

    /* ========================================
       Legacy Compatibility Variables
       متغيرات للتوافق مع الأكواد القديمة
       ======================================== */
    --brand-yellow: var(--mps-accent);
    --tech-blue: var(--mps-primary);
    --bg-gray: var(--mps-bg);
    --text-gray: var(--mps-text-secondary);
    --white: var(--mps-card-bg);
    --transition: var(--mps-transition);
    --card-hover-shadow: var(--mps-shadow-hover);
}