:root {
    --primary-color: #fff;
    --secondary-color: #1758d4;

    --navbar-color: #137fec;

    --secondary-color-hover: #144bb3;
    --background-color: #e6ecf8;
    --footer-background-color: #ececec;
    --dark-text: #2e2e2e;
    --dark-highlight-text: #142e6c;
    --footer-text: #2b2a2a;
    --accent-red: #c01d1d;
    --accent-green: #298e29;
    --light-blue: #3c5bb0;
    --border-grey: #b8b8b8;
    --dark-blue-50: #eff6ff;
    --dark-blue-100: #dbeafe;
    --dark-blue-700: #e6ecf8;
    --gray-300: #e0e0e0;

    --backdrop: rgba(31, 41, 55, 0.7); /* gray-800 @ 70% */
    --panel-bg: #ffffff;
    --panel-text: #374151; /* gray-700 */
    --accent: #2563eb; /* blue-600 */
    --panel-radius: 20px; /* rounded-2xl */
    --panel-padding: 1.5rem; /* p-6 */
    --spinner-size: 2.5rem; /* h-10 w-10 */

    --very-light-blue: #ebf8ff;
    --very-light-green: #ebfff7;
    --very-light-orange: #ffeeeb;
    --very-light-purple: #f6ebff;
    --very-light-cyan: #ebfffc;
    --very-light-brown: #fff0c4;
    --very-light-black: #d9e0e9;
    --very-light-dark-purple: #dcd6ff;

    --green-text: #106d78;
    --orange-text: #ff5648;
    --purple-text: #732ac5;
    --cyan-text: #028fa7;
    --brown-text: #a96800;
    --dark-purple-text: #5146b7;
    --dark-text: #465468;
}