/* ======================================================================
   نظام إدارة وجرد المطاعم - متغيرات التصميم الموحدة (Design System Variables)
   ====================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
    /* 1. نظام الألوان المتناسق (Material You HSL) */
    --primary-h: 215;
    --primary-s: 85%;
    --primary-l: 50%;
    
    --primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
    --primary-hover: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 8%));
    --primary-light: hsl(var(--primary-h), var(--primary-s), 96%);
    
    --secondary-h: 145;
    --secondary-s: 65%;
    --secondary-l: 40%;
    
    --secondary: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l));
    --secondary-hover: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) - 8%));
    --secondary-light: hsl(var(--secondary-h), var(--secondary-s), 95%);
    
    --danger-h: 354;
    --danger-s: 70%;
    --danger-l: 48%;
    
    --danger: hsl(var(--danger-h), var(--danger-s), var(--danger-l));
    --danger-hover: hsl(var(--danger-h), var(--danger-s), calc(var(--danger-l) - 8%));
    --danger-light: hsl(var(--danger-h), var(--danger-s), 96%);

    --warning-h: 38;
    --warning-s: 90%;
    --warning-l: 50%;
    --warning: hsl(var(--warning-h), var(--warning-s), var(--warning-l));

    /* 2. الألوان الخلفية والبطاقات (Light Theme) */
    --bg-color: #f6f8fc;
    --card-bg: #ffffff;
    --text-main: #1e293b;
    --text-muted: #64748b;
    --border-color: #e2e8f0;
    --input-bg: #f8fafc;
    
    /* 3. المؤثرات والتجانس */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.02);
    --shadow: 0 8px 30px rgba(0, 0, 0, 0.035), 0 2px 10px rgba(0, 0, 0, 0.015);
    --shadow-lg: 0 20px 40px -15px rgba(0, 0, 0, 0.06);
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    
    /* 4. الخطوط الأساسية */
    --font-family: 'Cairo', 'Outfit', system-ui, -apple-system, sans-serif;
    --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 🌙 تهيئة ألوان الثيم المظلم (Dark Theme Settings) */
[data-theme="dark"] {
    --bg-color: #0b0f19;
    --card-bg: #141c2f;
    --text-main: #f1f5f9;
    --text-muted: #94a3b8;
    --border-color: #222f47;
    --input-bg: #0f1624;
    
    --primary-light: rgba(59, 130, 246, 0.1);
    --secondary-light: rgba(16, 185, 129, 0.1);
    --danger-light: rgba(239, 68, 68, 0.1);
    
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 20px 40px -15px rgba(0, 0, 0, 0.35);
}

/* كلاسات الأنيميشن الشائعة الميكرو */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.spinner {
    animation: spin 1s linear infinite;
    display: inline-block;
}