/* CVI and Color-blindness friendly palette */
:root {
    --cvi-background: #FFFFFF; /* Pure white background for maximum contrast */
    --cvi-primary: #4A99E9;   /* Lighter blue - visible in all color blindness types */
    --cvi-accent: #FFCC00;    /* Bold yellow - visible for deuteranopia and protanopia */
    --cvi-positive: #009999;  /* Teal - visible in tritanopia */
    --cvi-support: #9966CC;   /* Lighter purple - high contrast with background */
    --cvi-warning: #FF6600;   /* Orange - distinct from other colors */
    --cvi-text: #333333;      /* Dark gray for text - high contrast with background */
    --cvi-border: #000000;    /* Black for borders - maximum contrast */
}

/* Background and container styles */
body {
    background-color: var(--cvi-background) !important;
}

body::before {
    background: var(--cvi-background) !important;
}

.container, .login-container {
    border: 4px solid var(--cvi-primary) !important;
    background-color: var(--cvi-background) !important;
    box-shadow: 0px 8px 20px rgba(74, 153, 233, 0.4) !important; /* Lighter, more subtle shadow */
}

/* Text colors */
h1, h2, h3 {
    color: var(--cvi-primary) !important;
}

.title-highlight {
    color: var(--cvi-accent) !important;
}

p, span, div, label {
    color: var(--cvi-text) !important;
}

/* Button styles */
button, .quiz-button, .google-btn {
    background-color: var(--cvi-primary) !important;
    color: var(--cvi-background) !important;
    border: 3px solid var(--cvi-border) !important;
}

/* Report button specific style - avoid green/red */
.report-btn {
    background-color: var(--cvi-support) !important; /* Using purple instead of green */
    color: var(--cvi-background) !important;
    border: 3px solid var(--cvi-border) !important;
}

.report-btn:hover {
    background-color: var(--cvi-accent) !important;
    color: var(--cvi-text) !important;
}

button:hover, .quiz-button:hover, .google-btn:hover {
    background-color: var(--cvi-accent) !important;
    color: var(--cvi-text) !important;
}

/* Profile icon */
.profile-icon {
    background-color: var(--cvi-primary) !important; /* Using primary blue instead of teal */
    border: 2px solid var(--cvi-border) !important;
}

/* Error messages */
.error-message {
    background-color: rgba(255, 102, 0, 0.2) !important;
    border-color: var(--cvi-warning) !important;
    color: var(--cvi-text) !important;
}

/* Background shapes - make them more visible */
.bg-shape:nth-child(1) {
    background-color: rgba(0, 102, 204, 0.2) !important; /* CVI-friendly blue */
}

.bg-shape:nth-child(2) {
    background-color: rgba(255, 204, 0, 0.2) !important; /* CVI-friendly yellow */
}

.bg-shape:nth-child(3) {
    background-color: rgba(153, 0, 204, 0.2) !important; /* CVI-friendly purple */
}

.bg-shape:nth-child(4) {
    background-color: rgba(0, 153, 153, 0.2) !important; /* CVI-friendly teal */
}

/* Links */
a {
    color: var(--cvi-primary) !important;
    font-weight: bold !important;
}

a:hover {
    color: var(--cvi-accent) !important;
}

/* Focus states for better accessibility */
*:focus {
    outline: 3px solid var(--cvi-accent) !important;
    outline-offset: 2px !important;
}