/* Default CSS - Load this first on all pages */
:root {
    --golf-green: #108a00;
    --golf-light-green: #c7ffd8;
    --golf-gold: #d4af37;
    --golf-sand: #f4e4bc;
    --golf-sky: #87ceeb;
    --golf-shadow: rgba(0, 0, 0, 0.1);
    
    /* Additional utility colors */
    --white: #ffffff;
    --black: #000000;
    --gray-light: #f5f5f5;
    --gray-medium: #666666;
    --gray-dark: #333333;
    --error: #dc3545;
    --success: #28a745;
    --warning: #ffc107;
    --info: #17a2b8;
}

/* Utility Classes for Colors */
.text-golf-green { color: var(--golf-green) !important; }
.text-golf-light-green { color: var(--golf-light-green) !important; }
.text-golf-gold { color: var(--golf-gold) !important; }
.text-golf-sand { color: var(--golf-sand) !important; }
.text-golf-sky { color: var(--golf-sky) !important; }

.bg-golf-green { background-color: var(--golf-green) !important; }
.bg-golf-light-green { background-color: var(--golf-light-green) !important; }
.bg-golf-gold { background-color: var(--golf-gold) !important; }
.bg-golf-sand { background-color: var(--golf-sand) !important; }
.bg-golf-sky { background-color: var(--golf-sky) !important; }

.border-golf-green { border-color: var(--golf-green) !important; }
.border-golf-light-green { border-color: var(--golf-light-green) !important; }
.border-golf-gold { border-color: var(--golf-gold) !important; }
.border-golf-sand { border-color: var(--golf-sand) !important; }
.border-golf-sky { border-color: var(--golf-sky) !important; }

/* Utility color classes */
.text-white { color: var(--white) !important; }
.text-black { color: var(--black) !important; }
.text-gray-light { color: var(--gray-light) !important; }
.text-gray-medium { color: var(--gray-medium) !important; }
.text-gray-dark { color: var(--gray-dark) !important; }
.text-error { color: var(--error) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-info { color: var(--info) !important; }

.bg-white { background-color: var(--white) !important; }
.bg-black { background-color: var(--black) !important; }
.bg-gray-light { background-color: var(--gray-light) !important; }
.bg-gray-medium { background-color: var(--gray-medium) !important; }
.bg-gray-dark { background-color: var(--gray-dark) !important; }
.bg-error { background-color: var(--error) !important; }
.bg-success { background-color: var(--success) !important; }
.bg-warning { background-color: var(--warning) !important; }
.bg-info { background-color: var(--info) !important; }

.btn-outline-secondary {
    background-color: var(--white);
    border-color: var(--gray-medium);
    color: var(--gray-medium);
}

.btn-outline-secondary:hover {
    background-color: var(--gray-medium);
    border-color: var(--gray-medium);
    color: var(--white);
}

.border-white { border-color: var(--white) !important; }
.border-black { border-color: var(--black) !important; }
.border-gray-light { border-color: var(--gray-light) !important; }
.border-gray-medium { border-color: var(--gray-medium) !important; }
.border-gray-dark { border-color: var(--gray-dark) !important; }
.border-error { border-color: var(--error) !important; }
.border-success { border-color: var(--success) !important; }
.border-warning { border-color: var(--warning) !important; }
.border-info { border-color: var(--info) !important; }

/* Common component styles using CSS variables */
.btn-golf-primary {
    background-color: var(--golf-green);
    border-color: var(--golf-green);
    color: var(--white);
}

.btn-golf-primary:hover {
    background-color: var(--golf-light-green);
    border-color: var(--golf-light-green);
    color: var(--white);
}

.btn-golf-secondary {
    background-color: var(--golf-gold);
    border-color: var(--golf-gold);
    color: var(--golf-dark);
}

.btn-golf-secondary:hover {
    background-color: var(--golf-sand);
    border-color: var(--golf-sand);
    color: var(--golf-dark);
}

.card-golf {
    background-color: var(--white);
    border: 1px solid var(--golf-sand);
    box-shadow: 0 2px 8px var(--golf-shadow);
}

.alert-golf-success {
    background-color: var(--success);
    border-color: var(--success);
    color: var(--white);
}

.alert-golf-error {
    background-color: var(--error);
    border-color: var(--error);
    color: var(--white);
}

.alert-golf-warning {
    background-color: var(--warning);
    border-color: var(--warning);
    color: var(--black);
}

.alert-golf-info {
    background-color: var(--info);
    border-color: var(--info);
    color: var(--white);
}

/* Form styling */
.form-control:focus {
    border-color: var(--golf-green);
    box-shadow: 0 0 0 0.2rem rgba(45, 90, 39, 0.25);
}

.form-select:focus {
    border-color: var(--golf-green);
    box-shadow: 0 0 0 0.2rem rgba(45, 90, 39, 0.25);
}

/* Link styling */
a {
    color: var(--golf-green);
}

a:hover {
    color: var(--golf-light-green);
}

/* Selection styling */
::selection {
    background-color: var(--golf-gold);
    color: var(--golf-dark);
}

::-moz-selection {
    background-color: var(--golf-gold);
    color: var(--golf-dark);
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--gray-light);
}

::-webkit-scrollbar-thumb {
    background: var(--golf-green);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--golf-light-green);
}