:root {
    /* Color Psychology System */
    --midnight-navy: #000000;
    /* خلفية سوداء فخمة */
    --deep-ocean: #1a237e;
    /* القوة والاستقرار */
    --electric-blue: #2196f3;
    /* الطاقة والحيوية */
    --neon-cyan: #00e5ff;
    /* النيون الجاذب للانتباه */
    --royal-gold: #c9b037;
    /* السلطة والفخامة */
    --warm-gold: #ffd700;
    /* الدفء والثقة */
    --soft-beige: #f5f5dc;
    /* القراءة المريحة */
    --pure-white: #ffffff;
    /* الوضوح والنقاء */

    /* Semantic Aliases */
    --color-primary: var(--deep-ocean);
    --color-accent: var(--royal-gold);
    --color-neon: var(--neon-cyan);
    --color-bg: var(--midnight-navy);
    --color-text-main: var(--pure-white);
    --color-text-muted: var(--soft-beige);

    /* Spacing System (8pt grid) */
    --space-xs: 0.5rem;
    /* 8px */
    --space-sm: 1rem;
    /* 16px */
    --space-md: 2rem;
    /* 32px */
    --space-lg: 4rem;
    /* 64px */
    --space-xl: 8rem;
    /* 128px */
    --space-2xl: 12rem;
    /* 192px */

    /* Typography Scale */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 3rem;
    --font-size-hero: 4.5rem;

    /* Animation Durations */
    --duration-fast: 150ms;
    --duration-base: 300ms;
    --duration-slow: 500ms;
    --duration-cinema: 2000ms;

    /* Easing Functions */
    --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

    /* Effects */
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-blur: blur(12px);
    --glow-shadow: 0 0 20px rgba(0, 229, 255, 0.3);
    --gold-glow: 0 0 30px rgba(201, 176, 55, 0.4);
}