:root {
    /* =====================================================
       Base Colors
    ===================================================== */

    --black: #000000;
    --white: #FFFFFF;
    /* =====================================================
       Brand Colors
    ===================================================== */

    --blue: #4A90E2;
    --red: #D0021B;
    --yellow: #F5F527;
    --green: #8EF527;
    /* =====================================================
       Neutral Colors
    ===================================================== */

    --charcoal: #2B2B2B;
    --gray: #9B9B9B;
    --light-gray: #F0F0F0;
    --bg-color: #181818;
    /* =====================================================
       Accent Colors
    ===================================================== */

    --orange: #FFA500;
    --orange-amber: #FF7B00;
    --mint: #50E3C2;
    --teal: #008080;
    --dark-green: #417505;
    --light-green: #5AFF19;
    --ice-green: #CCE7D3;
    --purple: #9013FE;
    --pink: #FF69B4;
    --lime-essence: #AFFF00;
    /* =====================================================
       Common UI Colors
    ===================================================== */

    --success: var(--dark-green);
    --warning: var(--yellow);
    --danger: var(--red);
    --info: var(--blue);
    /* =====================================================
       User Panel
    ===================================================== */

    --user-bg: var(--light-gray);
    --user-surface: var(--white);
    --user-text: var(--charcoal);
    --user-muted-text: var(--gray);
    --user-border: var(--light-gray);
    /* =====================================================
       Footer
    ===================================================== */

    --footer-bg: var(--bg-color);
    --footer-text: var(--gray);
    /* =====================================================
       Default Theme
       (ThemeEngine جایگزین می‌کند)
    ===================================================== */

    --primary: var(--orange-amber);
    --secondary: var(--lime-essence);
    --accent: var(--teal);
    --primary-text: var(--white);
    --secondary-text: var(--black);
    --accent-text: var(--white);  
    /* =====================================================
   Dynamic Theme Surfaces
   ThemeEngine می‌تواند این‌ها را تغییر دهد
===================================================== */

    --surface: var(--user-surface);
    --surface-text: var(--user-text);
    --surface-border: var(--user-border);
}