:root {
    --gradient-start: #1e3a8a;
    --gradient-end: #3b82f6;
    --primary-accent: #3b82f6;
    --secondary-accent: #60a5fa;
    --highlight-amber: #f59e0b;
    --text-primary: #ffffff;
    --text-secondary: #d1d5db;
    --text-on-accent: #ffffff;
    --panel-bg: rgba(255, 255, 255, 0.1);
    --input-bg: rgba(0, 0, 0, 0.2);
    --input-border: rgba(255, 255, 255, 0.3);
    --inner-panel-bg: rgba(0, 0, 0, 0.2);
    --nav-bg: rgba(30, 58, 138, 0.8);
    --nav-text: #d1d5db;
    --nav-button-bg: #f59e0b;
    --nav-button-text: #1e3a8a;
    --nav-brand-text: #ffffff;
}

/* Apply the theme to the entire page */
body {
    background: linear-gradient(180deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
    color: var(--text-primary);
}

/* Update general text and component colors */
.text-white { color: var(--text-primary) !important; }
.text-blue-200 { color: var(--text-secondary); }
.form-container { 
    background-color: var(--panel-bg); 
    border: 1px solid var(--input-border);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
}
.form-input, .form-input-readonly, .form-textarea, .form-select {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--text-primary);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--text-secondary); opacity: 0.7; }

/* Overrides for specific UI elements like the grey boxes in Referral section */
.bg-black\/20 {
    background-color: var(--inner-panel-bg);
}

/* Buttons and interactive elements */
.submit-btn {
    background: linear-gradient(to right, var(--primary-accent), var(--secondary-accent));
    color: var(--text-on-accent);
}
.level-step.current {
    background: linear-gradient(to right, var(--primary-accent), var(--secondary-accent));
    color: var(--text-on-accent);
    border-color: var(--primary-accent);
}
.message-user {
    background-color: color-mix(in srgb, var(--primary-accent) 30%, transparent);
    text-align: right;
}
.current-user-highlight {
    background-color: color-mix(in srgb, var(--primary-accent) 30%, transparent) !important;
    border-left: 4px solid var(--secondary-accent);
}
input:checked ~ .toggle-bg { background-color: var(--secondary-accent); }
.text-amber-300 { color: var(--highlight-amber); }

/* Navbar specific styles */
.navbar-theme {
    background-color: var(--nav-bg);
    backdrop-filter: blur(10px);
}
.nav-brand-text {
    color: var(--nav-brand-text);
}
.nav-link {
    color: var(--nav-text);
}
.nav-link:hover {
    color: var(--text-primary);
}
.nav-button {
    background-color: var(--nav-button-bg);
    color: var(--nav-button-text);
}
.nav-button:hover {
    filter: brightness(1.1);
}