/** Default Theme - Colors and palette **/

:root {
    /* Page Colors */
    --color-primary: #8b7355;
    --color-primary-dark: #6f5a47;
    --color-primary-light: #c9a876;
    --color-primary-lighter: #b89968;
    --color-primary-lightest: #d4a574;
    --color-secondary: #5c4033;
    --color-text-primary: #333333;
    --color-text-secondary: #666666;
    --color-text-tertiary: #999999;
    --color-background: #ffffff;
    --color-background-light: rgba(255, 255, 255, 0.9);
    --color-background-translucent: rgba(255, 255, 255, 0.85);
    --color-gradient-start: #f5f1e8;
    --color-gradient-end: #ede5d9;
    --color-border: rgba(0, 0, 0, 0.1);
    --color-border-light: rgba(0, 0, 0, 0.05);
    --color-status-success: #e8f5e9;
    --color-status-success-text: #2e7d32;
    --color-status-warning: #fff3e0;
    --color-status-warning-text: #e65100;
    --color-accent-gradient-start: rgba(201, 168, 118, 0.1);
    --color-accent-gradient-end: rgba(139, 115, 85, 0.05);
    --color-accent-gradient-start-hover: rgba(201, 168, 118, 0.15);
    --color-accent-gradient-end-hover: rgba(139, 115, 85, 0.1);

    /* Modal Colors */
    --modal-bg: #ffffff;
    --modal-overlay: rgba(0, 0, 0, 0.5);
    --modal-border: #e0d9ce;
    --modal-text-primary: #5c4033;
    --modal-text-secondary: #666666;
    --modal-text-muted: #999999;
    --modal-input-hover: #c9a876;
    --modal-input-focus: #8b7355;
    --modal-button-primary: #8b7355;
    --modal-button-hover: #6f5a47;
    --modal-link: #c9a876;
}

body {
    background: linear-gradient(135deg, var(--color-gradient-start) 0%, var(--color-gradient-end) 100%);
    color: var(--color-text-primary);
}

header {
    background: var(--color-background-translucent);
    border-bottom-color: var(--color-border);
}

.logo {
    color: var(--color-primary);
}

.nav-links a {
    color: var(--color-text-primary);
}

.nav-links a:hover {
    border-bottom-color: var(--color-primary-light);
}

.login-btn {
    background: var(--color-primary-light);
    color: var(--color-background);
}

.login-btn:hover {
    background: var(--color-primary-lighter);
}

.hero-content h1 {
    color: var(--color-secondary);
}

.hero-content p {
    color: var(--color-text-secondary);
}

.cta-primary {
    background: var(--color-primary);
    color: var(--color-background);
    border: none;
}

.cta-primary:hover {
    background: var(--color-primary-dark);
}

.cta-secondary {
    border: 2px solid var(--color-primary-light);
    color: var(--color-primary);
    background: transparent;
}

.cta-secondary:hover {
    background: var(--color-accent-gradient-start);
}

.news-container,
.servers-container {
    background: var(--color-background-light);
    border-color: var(--color-border);
}

.container-title {
    color: var(--color-secondary);
}

.news-item {
    border-bottom-color: var(--color-border);
}

.news-date {
    color: var(--color-text-tertiary);
}

.news-title {
    color: var(--color-text-primary);
}

.news-excerpt {
    color: var(--color-text-secondary);
}

.server-card {
    background: linear-gradient(135deg, var(--color-accent-gradient-start) 0%, var(--color-accent-gradient-end) 100%);
    border-color: var(--color-border);
}

.server-card:hover {
    border-color: var(--color-primary-light);
    background: linear-gradient(135deg, var(--color-accent-gradient-start-hover) 0%, var(--color-accent-gradient-end-hover) 100%);
}

.server-name {
    color: var(--color-secondary);
}

.server-status {
    background: var(--color-status-success);
    color: var(--color-status-success-text);
}

.server-status.upcoming {
    background: var(--color-status-warning);
    color: var(--color-status-warning-text);
}

.server-meta {
    color: var(--color-text-secondary);
}

.view-all {
    color: var(--color-primary-light);
}

.view-all:hover {
    color: var(--color-primary);
}

footer {
    background: var(--color-background-translucent);
    border-top-color: var(--color-border);
}

.footer-text {
    color: var(--color-text-secondary);
}

.footer-links a {
    color: var(--color-text-secondary);
}

.footer-links a:hover {
    color: var(--color-primary);
}

/* Policy Pages */
.policy-content {
    background: rgba(255, 255, 255, 0.95);
}

.policy-header {
    border-bottom-color: var(--color-primary-light);
}

.policy-header h1 {
    color: var(--color-secondary);
}

.policy-header p {
    color: var(--color-text-secondary);
}

.policy-section h2 {
    color: var(--color-primary);
    border-left-color: var(--color-primary-light);
}

.policy-section h3 {
    color: var(--color-secondary);
}

.policy-section p {
    color: var(--color-text-primary);
}

.policy-section li {
    color: var(--color-text-primary);
}

.policy-section li:before {
    color: var(--color-primary-light);
}

.policy-footer {
    border-top-color: #e0e0e0;
    color: var(--color-text-secondary);
}

/* Modal */
#registrationModal,
#loginModal,
#logoutModal {
    background: var(--modal-overlay);
}

.registration-modal-content,
.login-modal-content,
.logout-modal-content {
    background: var(--modal-bg);
}

.modal-close-btn {
    color: var(--modal-text-muted);
}

.modal-close-btn:hover {
    color: var(--modal-input-focus);
}

.modal-header h2 {
    color: var(--modal-text-primary);
}

.modal-header p {
    color: var(--modal-text-muted);
}

.form-group label {
    color: var(--modal-text-primary);
}

.form-group input[type="email"],
.form-group input[type="text"],
.form-group input[type="password"] {
    border-color: var(--modal-border);
    color: var(--modal-text-primary);
    background: var(--modal-bg);
}

.form-group input[type="email"]:hover,
.form-group input[type="text"]:hover,
.form-group input[type="password"]:hover {
    border-color: var(--modal-input-hover);
}

.form-group input[type="email"]:focus,
.form-group input[type="text"]:focus,
.form-group input[type="password"]:focus {
    border-color: var(--modal-input-focus);
}

.form-group input::placeholder {
    color: #bbb;
}



.form-checkbox-group input[type="checkbox"] {
    accent-color: var(--modal-input-hover);
}

.form-checkbox-group label {
    color: var(--modal-text-secondary);
}

.form-checkbox-group a {
    color: var(--modal-link);
}

.form-checkbox-group a:hover {
    color: var(--modal-input-focus);
}

.form-submit {
    background: var(--modal-button-primary);
    color: white;
}

.form-submit:hover {
    background: var(--modal-button-hover);
}

.modal-footer {
    color: var(--modal-text-secondary);
}

.modal-footer a {
    color: var(--modal-link);
}

.modal-footer a:hover {
    color: var(--modal-input-focus);
}

.modal-footer-links a {
    color: var(--modal-link);
}

.modal-footer-links a:hover {
    color: var(--modal-input-focus);
}

/* Form Validation Errors */
.form-error {
    color: #dc3545;
}

/* Form Success Message */
.form-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

/* Logout Modal */
.logout-modal-info {
    background: #f8f9fa;
    color: var(--modal-text-secondary);
}

.logout-modal-close-btn {
    color: var(--modal-text-muted);
}

.logout-modal-close-btn:hover {
    color: var(--modal-input-focus);
}

.logout-modal-confirm {
    background: #dc3545;
    color: white;
}

.logout-modal-confirm:hover {
    background: #c82333;
}

.logout-modal-confirm:disabled {
    background: #dc3545;
    opacity: 0.6;
    cursor: not-allowed;
}

.logout-modal-cancel {
    background: #6c757d;
    color: white;
}

.logout-modal-cancel:hover {
    background: #545b62;
}

.logout-modal-cancel:disabled {
    background: #6c757d;
    opacity: 0.6;
    cursor: not-allowed;
}

.logout-modal-status.logout-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.logout-modal-status.logout-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}