/* CSS Theme Variables - Professional Light Design */
:root {
  /* Primary Colors - Light & Professional */
  --bg-color: #ffffff;               /* Pure white main background */
  --section-bg: #f5f5f5;             /* Light grey for subtle containers only */
  --text-color: #2e2e2e;             /* Dark grey for titles and main text */
  --secondary-text: #4a4a4a;         /* Medium grey for paragraphs */
  --border-color: #dcdcdc;           /* Light grey for borders and dividers */
  
  /* Text Colors */
  --primary-color: #2e2e2e;          /* Dark grey for headings */
  --text-secondary: #4a4a4a;         /* Medium grey for body text */
  --text-light: #666666;             /* Light grey for less important content */
  
  /* Accent Colors */
  --accent-color: #666666;           /* Grey accent for buttons */
  --accent-hover: #4a4a4a;           /* Darker grey for hover states */
  --success-color: #2e7d32;          /* Dark green for success messages */
  --error-color: #c44c4c;            /* Red for errors */
  
  /* Light Theme Colors */
  --header-bg: #ffffff;              /* White header background */
  --footer-bg: #f5f5f5;              /* Light grey footer instead of dark */
  --footer-text: #2e2e2e;            /* Dark text in light footer */
  --card-bg: #ffffff;                /* White card backgrounds */
  --hero-bg: #ffffff;                /* White hero background */
  
  /* Typography */
  --font-main: 'Open Sans', sans-serif;
  --font-weight-normal: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Layout */
  --radius: 8px;
  --radius-small: 4px;
  --radius-large: 12px;
  --spacing: 1.5rem;
  --spacing-small: 0.75rem;
  --spacing-large: 3rem;
  
  /* Shadows - Subtle for light design */
  --shadow-light: 0 2px 8px rgba(46, 46, 46, 0.06);
  --shadow-medium: 0 4px 16px rgba(46, 46, 46, 0.08);
  --shadow-strong: 0 8px 24px rgba(46, 46, 46, 0.10);
  
  /* Transitions */
  --transition: all 0.3s ease;
  --transition-fast: all 0.15s ease;
  
  /* Container Settings */
  --container-max-width: 1200px;
  --container-padding: 2rem;
  
  /* Content Block Styling */
  --content-block-bg: #f5f5f5;
  --content-block-border: 1px solid #dcdcdc;
  --content-block-padding: 1.5rem;
  --content-block-margin: 1rem;
}

/* Dark mode support (optional) - keeping light theme */
@media (prefers-color-scheme: dark) {
  :root {
    /* Keep light theme even in dark mode preference for professional look */
    --bg-color: #ffffff;
    --section-bg: #f5f5f5;
    --text-color: #2e2e2e;
    --primary-color: #2e2e2e;
    --secondary-text: #4a4a4a;
    --border-color: #dcdcdc;
  }
}