/* Light Theme (Default) */
[data-theme="light"] {
    /* Global Colors */
    --background-color: #FFFFFF;
    --surface-color: #F8F9FA;
    --card-bg: #FFFFFF;
    --text-primary: #202124;
    --text-secondary: #5F6368;
    --shadow-color: rgba(0, 0, 0, 0.1);
}

/* Dark Theme */
[data-theme="dark"] {
    --background-color: #121212;
    --surface-color: #1E1E1E;
    --card-bg: #2D2D2D;
    --text-primary: #FFFFFF;
    --text-secondary: #B0B0B0;
    --shadow-color: rgba(0, 0, 0, 0.3);
}

/* Apply background color to html and body */
html {
    background-color: var(--background-color);
}

body {
    background-color: var(--background-color);
    color: var(--text-primary);
}

/* Page-Specific Themes */

/* Homepage - Oxford Blue Theme */
.page-home {
    --primary-color: #002147;    /* Oxford Blue */
    --secondary-color: #4285F4;  /* Google Blue */
    --on-primary-color: #FFFFFF;
    --on-background-color: #002147;
    --on-surface-color: #002147;
}

[data-theme="dark"] .page-home {
    --primary-color: #90CAF9;
    --secondary-color: #4285F4;
    --on-primary-color: #002147;
    --on-background-color: #E3F2FD;
    --on-surface-color: #E3F2FD;
}

/* Developer Page Theme - Dark Blue */
.page-developer {
    --primary-color: #1a365d;    /* Dark blue */
    --secondary-color: #2d3748;  /* Slightly lighter dark blue */
    --on-primary-color: #FFFFFF;
    --on-background-color: #1a365d;
    --on-surface-color: #1a365d;
}

[data-theme="dark"] .page-developer {
    --primary-color: #90cdf4;    /* Light blue for dark mode */
    --secondary-color: #63b3ed;
    --on-primary-color: #1a202c;
    --on-background-color: #E3F2FD;
    --on-surface-color: #E3F2FD;
}

/* Scout Page Theme */
.page-scout {
    --primary-color: #EA4335;
    --secondary-color: #FBBC04;
    --on-primary-color: #FFFFFF;
    --on-background-color: #EA4335;
    --on-surface-color: #EA4335;
}

[data-theme="dark"] .page-scout {
    --primary-color: #f28b82;  /* Light red for dark mode */
    --secondary-color: #FBBC04;
    --on-primary-color: #FFFFFF;
    --on-background-color: #f28b82;
    --on-surface-color: #f28b82;
}

/* Builder Page Theme - Warm Golden Yellow */
.page-builder {
    --primary-color: #d69e2e;    /* Warm golden yellow */
    --secondary-color: #b7791f;  /* Darker golden brown */
    --on-primary-color: #FFFFFF;
    --on-background-color: #d69e2e;
    --on-surface-color: #d69e2e;
}

[data-theme="dark"] .page-builder {
    --primary-color: #faf089;   /* Light golden yellow for dark mode */
    --secondary-color: #d69e2e;
    --on-primary-color: #1a202c;
    --on-background-color: #faf089;
    --on-surface-color: #faf089;
}

/* Card Specific Styles */
.developer-card {
    border-left: 4px solid #1a365d;
}

.scout-card {
    border-left: 4px solid #EA4335;
}

.builder-card {
    border-left: 4px solid #d69e2e;
}

.developer-card:hover {
    box-shadow: 0 8px 25px rgba(26, 54, 93, 0.15);
}

.scout-card:hover {
    box-shadow: 0 8px 25px rgba(234, 67, 53, 0.15);
}

.builder-card:hover {
    box-shadow: 0 8px 25px rgba(214, 158, 46, 0.15);
}