@layer theme {
    :root {
        --base-blue: #4f39f6;
        --light-blue: #2563eb;
        --ultra-dark-blue: #0d3b66;
        --ultra-light-blue: #6f8db8;
        --green-blue: #4cc9f0;
        --alpha-blue: #93c5fd80;
        --white-a01: #ffffff1a;
        --light-gray-blue: #9ca3af;
        --base-black: #000000;
        --alpha-black: #272f3a4d;
        --base-red: #ff0000;
        --base-white: #ffffff;
        --alpha-white: #ffffffcc;
        --transparent-gray: #64646448;
        --base-green: #009966;
        --dark-green: #007a55;
        --light-green-to-blue: #40b3a2;
        --bg-transparent: transparent;
        --bg-yellow: yellow;
        --footer-bg: #67b35b;
        --header-bg: #67b35b;
        --base-orange: #f97316;
        --base-purple: #5a189a;
        --light-purple: #e0aaff;
        --hero-bg-color: #f3f7eb;
        --cta-bg-color: #d4523c;
        --banner-bg-color: #dfb23f;
    }

    .dark {
    }
}