/* ===================================================================
   ConstructPro - Global Stylesheet (styles.css)
   Purpose: Foundational styles for fonts, colors, and basic elements.
   Loaded on ALL pages. Keep this file lean.
   =================================================================== */

/* --- 1. Root Variables & Font Imports --- */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Raleway:wght@400;500;600;700;800&display=swap');

:root {
    --cpro-blue: #0d6efd;
    --cpro-blue-dark: #0a58ca;
    --cpro-yellow: #ffc107;
    --cpro-green: #198754;
    --cpro-cyan: #0dcaf0;
    --cpro-red: #dc3545;
    --cpro-purple: #6f42c1;
    --cpro-heading-font: 'Raleway', sans-serif;
    --cpro-body-font: 'Open Sans', sans-serif;
    --cpro-heading-color: #2c3e50;
    --cpro-body-color: #343a40;
    --cpro-light-gray: #f8f9fa;
    --cpro-border-color: #dee2e6;
}

/* --- 2. General Element Styling --- */
body {
  font-family: var(--cpro-body-font);
  color: var(--cpro-body-color);
  line-height: 1.6;
}

a {
  color: var(--cpro-blue);
  text-decoration: none;
}
a:hover {
  color: var(--cpro-blue-dark);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--cpro-heading-font);
  color: var(--cpro-heading-color);
  font-weight: 600;
}

/* --- 3. Shared Component Overrides --- */
.btn-primary {
  background-color: var(--cpro-blue);
  border-color: var(--cpro-blue);
  font-weight: 600;
}
.btn-primary:hover {
  background-color: var(--cpro-blue-dark);
  border-color: var(--cpro-blue-dark);
}

.form-control:focus {
  border-color: var(--cpro-blue);
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.alert {
  border-left-width: 4px;
  border-radius: 0.25rem;
}
.alert-success { border-left-color: var(--cpro-green); }
.alert-danger { border-left-color: var(--cpro-red); }
.alert-warning { border-left-color: var(--cpro-yellow); }
.alert-info { border-left-color: var(--cpro-cyan); }

.card {
  border: 1px solid var(--cpro-border-color);
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05);
}
.card-header {
  background-color: var(--cpro-light-gray);
  font-weight: 600;
  border-bottom: 1px solid var(--cpro-border-color);
}