/* Central Color Definitions - Graytone Theme */
:root {
    /* Base graytones */
    --color-gray-100: #f8f9fa;  /* Lightest gray */
    --color-gray-200: #e9ecef;
    --color-gray-300: #dee2e6;
    --color-gray-400: #ced4da;
    --color-gray-500: #adb5bd;
    --color-gray-600: #6c757d;
    --color-gray-700: #495057;
    --color-gray-800: #343a40;
    --color-gray-900: #212529;  /* Darkest gray */

    /* Semantic colors - all graytones */
    --color-primary: var(--color-gray-700);
    --color-primary-hover: var(--color-gray-800);
    --color-primary-border: var(--color-gray-800);
    
    --color-secondary: var(--color-gray-600);
    --color-secondary-hover: var(--color-gray-700);
    
    --color-background: #ffffff;
    --color-background-alt: var(--color-gray-100);
    --color-background-dark: var(--color-gray-800);
    
    --color-text: var(--color-gray-900);
    --color-text-muted: var(--color-gray-600);
    --color-text-light: var(--color-gray-400);
    
    --color-border: var(--color-gray-300);
    --color-border-dark: var(--color-gray-500);
    
    --color-link: var(--color-gray-700);
    --color-link-hover: var(--color-gray-900);
    
    /* UI element colors */
    --color-navbar: var(--color-gray-800);
    --color-navbar-text: var(--color-gray-200);
    --color-navbar-active: var(--color-gray-600);
    --color-navbar-hover: var(--color-gray-700);
    
    --color-button-primary: var(--color-gray-700);
    --color-button-primary-hover: var(--color-gray-800);
    
    /* Focus states */
    --color-focus: var(--color-gray-500);
    --color-focus-shadow: rgba(108, 117, 125, 0.25);
    
    /* Validation states - subtle graytones */
    --color-valid: var(--color-gray-600);
    --color-invalid: var(--color-gray-800);
    --color-error: var(--color-gray-900);
    --color-error-background: var(--color-gray-200);
    
    /* Modal/overlay colors */
    --color-modal-background: #ffffff;
    --color-modal-backdrop: rgba(0, 0, 0, 0.4);
    --color-modal-shadow: rgba(0, 0, 0, 0.3);
}

.navbar-top.header-style-default {
    --color-navbar: var(--color-gray-800);
    --color-navbar-text: var(--color-gray-200);
    --color-navbar-active: var(--color-gray-600);
    --color-navbar-hover: var(--color-gray-700);
}

.navbar-top.header-style-dark-green {
    --color-navbar: #1f4f3d;
    --color-navbar-text: #e8f7ed;
    --color-navbar-active: #2d6f55;
    --color-navbar-hover: #3a8968;
}

.navbar-top.header-style-dark-purple {
    --color-navbar: #3a275f;
    --color-navbar-text: #f2e9ff;
    --color-navbar-active: #55378f;
    --color-navbar-hover: #6b45b0;
}

.navbar-top.header-style-edk-blue {
    --color-navbar: #0b3f9b;
    --color-navbar-text: #ffffff;
    --color-navbar-active: #082f73;
    --color-navbar-hover: #1557c0;
}

.navbar-top.header-style-hills-banner {
    --color-navbar: #253126;
    --color-navbar-text: #000000;
    --color-navbar-active: rgba(30, 60, 36, 0.7);
    --color-navbar-hover: rgba(40, 75, 45, 0.75);
}

.navbar-top.header-style-hills-golfer {
    --color-navbar: #253126;
    --color-navbar-text: #000000;
    --color-navbar-active: rgba(30, 60, 36, 0.7);
    --color-navbar-hover: rgba(40, 75, 45, 0.75);
}

.navbar-top.header-style-logo-banner {
    --color-navbar: #253126;
    --color-navbar-text: #000000;
    --color-navbar-active: rgba(30, 60, 36, 0.7);
    --color-navbar-hover: rgba(40, 75, 45, 0.75);
}

.navbar-top.header-style-flames-banner {
    --color-navbar: #3a1b12;
    --color-navbar-text: #000000;
    --color-navbar-active: rgba(96, 43, 25, 0.7);
    --color-navbar-hover: rgba(120, 55, 30, 0.75);
}

.navbar-top.header-style-pinstripe-banner,
.navbar-top.header-style-blurry-banner {
    --color-navbar: #253126;
    --color-navbar-text: #000000;
    --color-navbar-active: rgba(30, 60, 36, 0.7);
    --color-navbar-hover: rgba(40, 75, 45, 0.75);
}

.navbar-top.header-style-white {
    --color-navbar: #ffffff;
    --color-navbar-text: #212529;
    --color-navbar-active: #e9ecef;
    --color-navbar-hover: #f1f3f5;
}