/*
PROLAB 3D Website - Color Configuration
=======================================

This file contains all the color variables used throughout the website.
To customize the colors to match your logo, simply update the values below.

HOW TO USE:
1. Update the color values in this file
2. The changes will automatically apply to the entire website
3. You can use any valid CSS color format (hex, rgb, hsl, etc.)

COLOR MEANING:
- primary-color: Main brand color (used for headers, navigation, footer)
- secondary-color: Secondary/accent color (used for buttons, links, highlights)
- accent-color: Call-to-action color (used for primary buttons, important elements)
- text-dark: Dark text color (used for headings and important text)
- text-light: Light text color (used for body text and secondary information)
- bg-light: Light background color (used for section backgrounds)
- bg-white: White background color
- border-color: Border color (used for form inputs and dividers)
*/

:root {
    /* ===== MAIN BRAND COLORS ===== */
    --primary-color: #181c20;      /* Very dark blue-gray - Main brand color */
    --secondary-color: #12d11b;    /* Green accent color (from first section) */
    --accent-color: #12d11b;       /* Use green for call-to-action as well */
    
    /* ===== TEXT COLORS ===== */
    --text-dark: #ffffff;          /* Light text for headings and main text */
    --text-light: #b0b8c1;         /* Muted light text for secondary info */
    
    /* ===== BACKGROUND COLORS ===== */
    --bg-light: #23272b;           /* Dark background for sections */
    --bg-white: #181c20;           /* Main dark background */
    
    /* ===== BORDER AND SHADOW COLORS ===== */
    --border-color: #2c3e50;       /* Slightly lighter dark for borders */
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.4);           /* Stronger shadow for dark mode */
    --shadow-hover: 0 8px 15px rgba(0, 0, 0, 0.6);    /* Hover shadow */
    
    /* ===== ANIMATION ===== */
    --transition: all 0.3s ease;    /* Default transition timing */
}

/*
PRESET COLOR SCHEMES
====================

Uncomment one of these sections to use a preset color scheme:

1. MODERN DARK THEME
:root {
    --primary-color: #1a1a1a;
    --secondary-color: #4a90e2;
    --accent-color: #f39c12;
    --text-dark: #1a1a1a;
    --text-light: #666666;
    --bg-light: #f5f5f5;
    --bg-white: #ffffff;
    --border-color: #e0e0e0;
}

2. CREATIVE PURPLE THEME
:root {
    --primary-color: #6c5ce7;
    --secondary-color: #a29bfe;
    --accent-color: #fd79a8;
    --text-dark: #2d3436;
    --text-light: #636e72;
    --bg-light: #f8f9ff;
    --bg-white: #ffffff;
    --border-color: #e8e8ff;
}

3. TECH GREEN THEME
:root {
    --primary-color: #00b894;
    --secondary-color: #00cec9;
    --accent-color: #fdcb6e;
    --text-dark: #2d3436;
    --text-light: #636e72;
    --bg-light: #f0fff4;
    --bg-white: #ffffff;
    --border-color: #e0f0e0;
}

4. PROFESSIONAL BLUE THEME (Current)
:root {
    --primary-color: #2c3e50;
    --secondary-color: #3498db;
    --accent-color: #e74c3c;
    --text-dark: #2c3e50;
    --text-light: #7f8c8d;
    --bg-light: #f8f9fa;
    --bg-white: #ffffff;
    --border-color: #ecf0f1;
}

5. WARM ORANGE THEME
:root {
    --primary-color: #d35400;
    --secondary-color: #e67e22;
    --accent-color: #f39c12;
    --text-dark: #2c3e50;
    --text-light: #7f8c8d;
    --bg-light: #fff8f0;
    --bg-white: #ffffff;
    --border-color: #ffeaa7;
}
*/

/*
CUSTOMIZATION TIPS
==================

1. COLOR HARMONY:
   - Use complementary colors for high contrast
   - Use analogous colors for a harmonious look
   - Use triadic colors for a balanced design

2. ACCESSIBILITY:
   - Ensure sufficient contrast between text and background
   - Test your color scheme with color blindness simulators
   - Use tools like WebAIM's contrast checker

3. BRAND CONSISTENCY:
   - Match your logo colors exactly
   - Use consistent color application throughout
   - Consider your brand personality when choosing colors

4. MOBILE CONSIDERATIONS:
   - Colors may appear differently on mobile screens
   - Test on actual devices when possible
   - Consider ambient lighting conditions

EXAMPLE: If your logo uses these colors:
- Main color: #FF6B35 (orange)
- Secondary: #004E89 (blue)
- Accent: #FFEAA7 (yellow)

You would update the variables like this:
:root {
    --primary-color: #FF6B35;
    --secondary-color: #004E89;
    --accent-color: #FFEAA7;
    --text-dark: #2c3e50;
    --text-light: #7f8c8d;
    --bg-light: #fff8f0;
    --bg-white: #ffffff;
    --border-color: #ffeaa7;
}
*/