/* ========================================
   SIMPLIFIED COLOR SYSTEM
   ======================================== */

:root {
    /* ========================================
       SIMPLIFIED COLOR PALETTE
       ======================================== */
    
    /* Background Colors */
    --bg-webpage: #f8fafc;        /* Light gray background for whole webpage */
    --bg-header: #ffffff;         /* White header background */
    --bg-footer: #262529;         /* Dark blue-gray footer background */
    --bg-card: #a9b3b6;           /* Light blue-gray background for cards */
    
    /* Brand Colors */
    --primary: #065f4c;           /* Blue - primary brand color */
    --secondary: #88bbbb;         /* Slate gray - secondary color */
    --tertiary: #5C99CE; /* Green - tertiary/accent color */
    --brand-red: #c53030;         /* Accent red (problem/emphasis, pairs with primary) */
    --brand-red-dark: #9b2424;    /* Darker red for headings on light backgrounds */

    /* Text Colors */
    --text-bright: #ebf8f4;       /* White text for dark backgrounds */
    --text-bright-secondary: #afdfd0; /* Secondary bright text for lighter emphasis */
    --text-dark: #050807;         /* Dark blue-gray text for light backgrounds */
    --text-dark-secondary: #065f4c; /* Secondary dark text for lighter emphasis */
    --text-gray: #383838;
    
    /* Additional text colors for compatibility */
    --text-primary: var(--text-dark);
    --text-secondary: var(--text-dark-secondary);
    --text-muted: var(--text-gray);
    --text-inverse: var(--text-bright);
    --text-inverse-secondary: var(--text-bright-secondary);



    /* ========================================
       OLD COLORS (COMMENTED OUT FOR REFERENCE)
       ======================================== */
    
    /*
    /* OLD COLOR PALETTE: *
    --bg-webpage: #f8fafc;
    --bg-header: #ffffff;
    --bg-footer: #262529;
    --bg-card: #ffffff;
    
    --primary: #557A95;
    --secondary: #93B0B8;
    --tertiary: #10b981;

    --text-bright: #ffffff;
    --text-bright-secondary: #e2e8f0;
    --text-dark: #1e293b;
    --text-dark-secondary: #475569;
    */


}

/* ========================================
   BACKGROUND UTILITY CLASSES
   ======================================== */

.bg-webpage { background-color: var(--bg-webpage); }
.bg-header { background-color: var(--bg-header); }
.bg-footer { background-color: var(--bg-footer); }
.bg-card { background-color: var(--bg-card); }

/* ========================================
   TEXT UTILITY CLASSES
   ======================================== */

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

/* ========================================
   BRAND COLOR UTILITY CLASSES
   ======================================== */

/* Primary Color */
.text-primary { color: var(--primary); }
.bg-primary { background-color: var(--primary); }
.border-primary { border-color: var(--primary); }

/* Secondary Color */
.text-secondary { color: var(--secondary); }
.bg-secondary { background-color: var(--secondary); }
.border-secondary { border-color: var(--secondary); }

/* Tertiary Color */
.text-tertiary { color: var(--tertiary); }
.bg-tertiary { background-color: var(--tertiary); }
.border-tertiary { border-color: var(--tertiary); }

/* Brand red (e.g. problem/solution contrast on project pages) */
.text-brand-red { color: var(--brand-red); }
.text-brand-red-dark { color: var(--brand-red-dark); }
.border-l-brand-red { border-left-width: 4px; border-left-style: solid; border-left-color: var(--brand-red); }
.border-l-brand-primary { border-left-width: 4px; border-left-style: solid; border-left-color: var(--primary); }

/* ========================================
   COMPONENT-SPECIFIC STYLES
   ======================================== */

/* Button Styles */
.btn-primary {
    background-color: var(--primary);
    color: var(--text-bright);
    border: 1px solid var(--primary);
}

.btn-primary:hover {
    background-color: var(--secondary);
    border-color: var(--secondary);
}

/* Enhanced Contact Button Styling - stands out on primary background */
#contact .btn-primary {
    background-color: white;
    color: var(--primary);
    border: 2px solid white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.10);
    font-weight: bold;
    transform: translateY(0);
    transition: all 0.3s ease;
}

#contact .btn-primary:hover {
    background-color: var(--text-bright);
    color: var(--primary);
    border-color: var(--text-bright);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25), 0 3px 6px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}


/* Card Styles */
.card {
    background-color: var(--bg-card);
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Link Styles */
.link-primary {
    color: var(--primary);
    text-decoration: none;
}

.link-primary:hover {
    color: var(--tertiary);
}



/* ========================================
   LEGACY SUPPORT
   ======================================== */

/* Maintain compatibility with existing classes */
.bg-primary-500 { background-color: var(--primary); }
.bg-primary-600 { background-color: var(--secondary); }
.bg-primary-700 { background-color: var(--tertiary); }

.text-primary-600 { color: var(--primary); }
.text-primary-700 { color: var(--secondary); }

.bg-gray-50 { background-color: var(--bg-webpage); }
.bg-white { background-color: var(--bg-header); }
.bg-dark { background-color: var(--bg-footer); }

.text-gray-900 { color: var(--text-dark); }
.text-gray-800 { color: var(--text-dark-secondary); }
.text-gray-700 { color: var(--secondary); }
.text-gray-600 { color: var(--secondary); }
.text-white { color: var(--text-bright); }
.text-bright-secondary { color: var(--text-bright-secondary); }

.border-gray-200 { border-color: #e2e8f0; }
.border-gray-300 { border-color: #d1d5db; }