/* CSS Custom Properties for theme toggle */

:root {
    /* Light theme (default) */
    --color-secondary-fixed: #f4a84a;
    --color-surface-variant: #fffcd0;
    --color-on-primary-container: #fef7e5;
    --color-tertiary-fixed-dim: #e8956a;
    --color-on-primary-fixed-variant: #5a3a1a;
    --color-on-surface: #4a4020;
    --color-surface-container: #fffde8;
    --color-on-tertiary: #7a4a2a;
    --color-surface-bright: #fffff5;
    --color-on-primary-fixed: #4a3a1a;
    --color-inverse-on-surface: #fffde8;
    --color-tertiary-fixed: #f4a84a;
    --color-surface-container-high: #fffcd0;
    --color-inverse-primary: #f4a84a;
    --color-on-secondary-fixed-variant: #6a4a1a;
    --color-secondary: #8a5a2a;
    --color-primary-fixed: #f4a84a;
    --color-primary-container: #c97a3a;
    --color-surface-container-lowest: #fffff5;
    --color-primary-fixed-dim: #e8956a;
    --color-inverse-surface: #4a4020;
    --color-on-surface-variant: #8a6a40;
    --color-surface-container-highest: #fffcd0;
    --color-secondary-fixed-dim: #f4a84a;
    --color-tertiary: #c97a3a;
    --color-error-container: #ffdad6;
    --color-on-error-container: #410002;
    --color-secondary-container: #f4a84a;
    --color-outline-variant: #e8d8c0;
    --color-on-tertiary-fixed-variant: #7a5a2a;
    --color-on-tertiary-container: #fef5e5;
    --color-on-error: #ffffff;
    --color-tertiary-container: #e8956a;
    --color-surface-dim: #fffcc8;
    --color-on-secondary-fixed: #4a3a1a;
    --color-background: #ffffc3;
    --color-outline: #a8844a;
    --color-on-secondary: #faf8f0;
    --color-on-primary: #ffffff;
    --color-error: #ba1a1a;
    --color-on-tertiary-fixed: #4a3a1a;
    --color-primary: #c97a3a;
    --color-on-secondary-container: #6a4a1a;
    --color-on-background: #4a4020;
    --color-surface-tint: #c97a3a;
    --color-surface: #ffffc3;
    --color-surface-container-low: #fffde8;
    --grid-dot-color: rgba(74, 64, 32, 0.08);
    --ball-gradient-primary-start: #f4a84a;
    --ball-gradient-primary-end: #c97a3a;
    --ball-gradient-secondary-start: #ffc857;
    --ball-gradient-secondary-end: #f4a84a;
    --color-cta-card-from: #c97a3a;
    --color-cta-card-to: #c97a3a;
    --color-cta-card-border: #c97a3a;
    --color-cta-card-text: #ffffff;
    --color-cta-button-from: #f4a84a;
    --color-cta-button-to: #f4a84a;
    --color-cta-button-text: #6a4a1a;
}

:root.dark {
    /* Dark theme */
    --color-secondary-fixed: #ffe16d;
    --color-surface-variant: #353534;
    --color-on-primary-container: #cbffc2;
    --color-tertiary-fixed-dim: #91d78a;
    --color-on-primary-fixed-variant: #005312;
    --color-on-surface: #e5e2e1;
    --color-surface-container: #201f1f;
    --color-on-tertiary: #003909;
    --color-surface-bright: #393939;
    --color-on-primary-fixed: #002204;
    --color-inverse-on-surface: #313030;
    --color-tertiary-fixed: #acf4a4;
    --color-surface-container-high: #2a2a2a;
    --color-inverse-primary: #1b6d24;
    --color-on-secondary-fixed-variant: #544600;
    --color-secondary: #fff9ef;
    --color-primary-fixed: #a3f69c;
    --color-primary-container: #2e7d32;
    --color-surface-container-lowest: #0e0e0e;
    --color-primary-fixed-dim: #88d982;
    --color-inverse-surface: #e5e2e1;
    --color-on-surface-variant: #bfcaba;
    --color-surface-container-highest: #353534;
    --color-secondary-fixed-dim: #e9c400;
    --color-tertiary: #91d78a;
    --color-error-container: #93000a;
    --color-on-error-container: #ffdad6;
    --color-secondary-container: #ffdb3c;
    --color-outline-variant: #40493d;
    --color-on-tertiary-fixed-variant: #0c5216;
    --color-on-tertiary-container: #c8ffbf;
    --color-on-error: #690005;
    --color-tertiary-container: #3a7b39;
    --color-surface-dim: #131313;
    --color-on-secondary-fixed: #221b00;
    --color-background: #131313;
    --color-outline: #8a9485;
    --color-on-secondary: #3a3000;
    --color-on-primary: #003909;
    --color-error: #ffb4ab;
    --color-on-tertiary-fixed: #002203;
    --color-primary: #88d982;
    --color-on-secondary-container: #725f00;
    --color-on-background: #e5e2e1;
    --color-surface-tint: #88d982;
    --color-surface: #131313;
    --color-surface-container-low: #1c1b1b;
    --grid-dot-color: rgba(255, 255, 255, 0.05);
    --ball-gradient-primary-start: #88d982;
    --ball-gradient-primary-end: #2e7d32;
    --ball-gradient-secondary-start: #ffe16d;
    --ball-gradient-secondary-end: #ffdb3c;
    --color-cta-card-from: #1c1b1b;
    --color-cta-card-to: #2a2a2a;
    --color-cta-card-border: #40493d;
    --color-cta-card-text: #e5e2e1;
    --color-cta-button-from: #2e7d32;
    --color-cta-button-to: #88d982;
    --color-cta-button-text: #003909;
}

:root.dark .theme-toggle {
    background-color: var(--color-primary-container);
    border-color: var(--color-primary-container);
}

:root.dark .theme-toggle .theme-icon {
    color: white;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.winning-glow {
    box-shadow: 0 0 20px rgba(233, 196, 0, 0.3);
}

.emerald-glow {
    box-shadow: 0 0 15px rgba(136, 217, 130, 0.2);
}

.cta-card-surface {
    background: linear-gradient(to bottom right, var(--color-cta-card-from), var(--color-cta-card-to));
    border-color: var(--color-cta-card-border);
    color: var(--color-cta-card-text);
}

.cta-button-accent {
    background: linear-gradient(to bottom right, var(--color-cta-button-from), var(--color-cta-button-to));
    color: var(--color-cta-button-text);
}

/* Custom scrollbar for a premium look */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-surface-container-lowest);
}

::-webkit-scrollbar-thumb {
    background: var(--color-surface-container-highest);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-outline-variant);
}