:root {
    /* Base Colors */
    --background-color: #ffffff;
    --text-color: #333333;
    --border-color: #e0e0e0;
    --card-bg: #f8f9fa;
    --chart-bg: #f8f9fa;

    /* Primary Colors */
    --primary-color: #4CAF50;
    --primary-1: #4CAF50;
    --primary-2: #2196F3;
    --primary-3: #9C27B0;
    --primary-4: #00c853;
    --secondary-color: #45a049;

    /* Accent Colors */
    --accent-1: #FF4081;
    --accent-2: #FF9800;

    /* Special Colors */
    --pink-color: #de0b8d;
    --lite-blue-color: #2563EB;
    --blue-color: #0c5bda;
    --success-color: #45a049;

    /* Background Variants */
    --lite-gray: #f2f3f9;
    --cream-color: #faf5e5;
    --blue-rear: #66d6d1;
    --rear-lite-blue: #e9f7f9;
    --dark-green-0: #f8f9fa;
    --orange-0: #fef0e3;
    --lite-green-0: #edfbe2;
    --lite-purple-0: #f2f0fe;
    --lite-purple-1: #e7e3fe;

    /* Unique Colors */
    --unique-deep-blue: #03A791;
    --unique-vivid-pink: #FF0B55;
    --unique-forest-green: #328E6E;
    --unique-bright-orange: #EC5228;
    --unique-golden-amber: #D98324;
    --unique-sunset-yellow: #DDA853;

    /* Navigation Colors */
    --nav-col-1: #2DAA9E;
    --nav-col-2: #00879E;
    --nav-col-3: #006BFF;
    --nav-col-4: #1B56FD;
    --nav-col-5: #003092;
    --nav-col-6: #3D90D7;
    --nav-col-7: #FFAB5B;
    --nav-col-8: #00879E;
    --nav-col-9: #4CC9FE;
    --nav-col-10: #37AFE1;

    /* Gradients */
    --grad-col-hero: linear-gradient(135deg, var(--lite-purple-0) 0%, var(--lite-gray) 100%);

    /* Theme Contrast */
    --dark: #202124;
    --light: #f8f9fa;
}

[data-theme="dark"] {
    /* Base Colors */
    --background-color: #1a1a1a;
    --text-color: #ffffff;
    --border-color: #404040;
    --card-bg: #2d2d2d;
     --chart-bg: #939494;

    /* Primary Colors */
    --primary-1: #66BB6A;
    --primary-2: #64B5F6;
    --primary-3: #BA68C8;

    /* Accent Colors */
    --accent-1: #FF79B0;
    --accent-2: #FFB74D;

    /* Special Colors */
    --pink-color: #ec0c96;

    /* Background Variants */
    --lite-gray: #1a1a1a;
    --cream-color: #1a1a1a;
    --rear-lite-blue: #1a1a1a;
    --orange-0: #1a1a1a;
    --lite-purple-0: #1a1a1a;
    --lite-green-0: #1a1a1a;
    --lite-blue-color: #3b77f9;

    /* Gradients */
    --grad-col-hero: #381122;

    /* Theme Contrast */
    --dark: #f8f9fa;
    --light: #202124;
}