@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

:root {
    --primary-color: #FFD700;
    --primary-dark-color: #B8860B;
    --primary-light-color: #FFF8DC;
    --secondary-color: #32F3F9;
    --secondary-dark-color: #072446;
    --accent-color: #2BCFDB;
    --white-color: #FFFFFF;
    --black-color: #000000;

    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1E1E1E;
    --gray-900: #121212;
    --gray-950: #0A0A0A;

    --success-color: #00FF7F;
    --warning-color: #FFD700;
    --error-color: #FF4500;
    --info-color: #1E90FF;

    --page-background-color: #121212;
    --card-background-color: #1E1E1E;
    --input-background-color: #2C2C2C;
    --border-color: #444444;
    --text-primary-color: #072446;
    --text-secondary-color: #CCCCCC;

    --gradient-start: #FFD700;
    --gradient-end: #B8860B;
    --accent-gradient-start: #32F3F9;
    --accent-gradient-end: #072446;
    --background-gradient-start: #121212;
    --background-gradient-end: #0A0A0A;
}

html, body {
    background-color: var(--page-background-color);
    color: var(--secondary-color);
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--primary-color);
}

a, .btn-link {
    color: var(--secondary-color);
}

.btn-primary {
    background-color: var(--primary-color);
    color: var(--black-color);
    border: none;
}

.btn-primary:hover {
    box-shadow: 0 0 10px var(--secondary-color);
}

.btn:focus, .form-control:focus {
    box-shadow: 0 0 0 0.25rem var(--accent-color);
}

.card {
    background-color: var(--card-background-color);
    border: 1px solid var(--border-color);
}

.form-control {
    background-color: var(--input-background-color);
    color: var(--accent-color);
    border: 1px solid var(--border-color);
}

.text-muted {
    color: var(--text-secondary-color);
}

.dropdown-menu {
    background-color: var(--card-background-color);
    border: 1px solid var(--border-color);
}

.dropdown-item {
    color: var(--accent-color);
}

.dropdown-item:hover {
    background-color: var(--accent-color);
    color: var(--secondary-dark-color);
}



.validation-message {
    color: var(--error-color);
}


.btn {
    background-color: var(--secondary-dark-color);
    color: var(--primary-color);
    border: 1px solid var(--primary-dark-color);
}

.btn:hover {
    background-color: var(--primary-dark-color);
    color: var(--secondary-color);
    border: 1px solid var(--primary-color);
}

.btn:active {
    background-color: var(--primary-light-color);
    color: var(--secondary-dark-color);
    border: 1px solid var(--primary-dark-color);
}

.btn:focus {
    outline: 2px solid var(--primary-light-color);
    outline-offset: 2px;
}