/* public/css/theme-colors.css */
:root {
    /* 
     * Default Light Theme (Matches the rest of the website) 
     * Uncomment the Dark Theme below to match the dark layout format.
     */
    
    /* Section Background */
    --srv-bg-color: #ffffff;
    
    /* Typography */
    --srv-title-text: #1e3a8a; /* text-blue-900 */
    --srv-title-highlight: #0d9488; /* text-teal-600 */
    --srv-subtitle-text: #4b5563; /* text-gray-600 */
    
    /* Cards */
    --srv-card-bg: #ffffff;
    --srv-card-border: #e5e7eb; /* border-gray-200 */
    
    --srv-card-title-text: #1e3a8a; /* text-blue-900 */
    --srv-card-desc-text: #4b5563; /* text-gray-600 */

    /* Icon Colors (Light mode friendly) */
    --srv-icon-1-bg: #d1fae5; --srv-icon-1-text: #059669; /* Green */
    --srv-icon-2-bg: #dbeafe; --srv-icon-2-text: #2563eb; /* Blue */
    --srv-icon-3-bg: #e0e7ff; --srv-icon-3-text: #4f46e5; /* Indigo */
    --srv-icon-4-bg: #fce7f3; --srv-icon-4-text: #db2777; /* Pink */
    --srv-icon-5-bg: #fef3c7; --srv-icon-5-text: #d97706; /* Yellow */
    --srv-icon-6-bg: #f3e8ff; --srv-icon-6-text: #9333ea; /* Purple */
}

/* 
 * Dark Theme Example (Matches the original dark layout design)
 * To use this, replace the :root variables above with these:
 *
:root {
    --srv-bg-color: #111827;
    
    --srv-title-text: #f9fafb;
    --srv-title-highlight: #818cf8;
    --srv-subtitle-text: #d1d5db;
    
    --srv-card-bg: #1f2937;
    --srv-card-border: #374151;
    
    --srv-card-title-text: #f9fafb;
    --srv-card-desc-text: #d1d5db;

    --srv-icon-1-bg: rgba(5, 150, 105, 0.2); --srv-icon-1-text: #34d399;
    --srv-icon-2-bg: rgba(37, 99, 235, 0.2); --srv-icon-2-text: #60a5fa;
    --srv-icon-3-bg: rgba(79, 70, 229, 0.2); --srv-icon-3-text: #818cf8;
    --srv-icon-4-bg: rgba(219, 39, 119, 0.2); --srv-icon-4-text: #f472b6;
    --srv-icon-5-bg: rgba(217, 119, 6, 0.2); --srv-icon-5-text: #fbbf24;
    --srv-icon-6-bg: rgba(147, 51, 234, 0.2); --srv-icon-6-text: #c084fc;
}
*/