/* CSS Overrides */

/* 
 * COLOR PALETTE Override Examples
 * 
 * Option 1: Modern Deep Teal + Gold Theme
 * :root {
 *   --color-primary: #0F766E;
 *   --color-primary-dark: #0D5D56;
 *   --color-accent: #D97706;
 * }
 /* 
 * Option 2: Modern Purple + Orange Theme
 * :root {
 *   --color-primary: #7C3AED;
 *   --color-primary-dark: #5B21B6;
 *   --color-accent: #F97316;
 * }
 */

/* 
 * COMPONENT COLOR Override Examples (BEM Naming)
 * 
 * Hero title color override
 * .hero__title {
 *   color: var(--color-primary);
 * }
 * 
 * Primary button styling
 * .btn--primary {
 *   background-color: var(--color-primary);
 *   border-color: var(--color-primary);
 * }
 * 
 * .btn--primary:hover {
 *   background-color: var(--color-primary-dark);
 *   border-color: var(--color-primary-dark);
 * }
 * 
 * Form input focus styling
 * .form__input:focus {
 *   border-color: var(--color-accent);
 *   box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
 * }
 * 
 * Feature card hover styling
 * .features__card:hover {
 *   transform: translateY(-8px);
 *   box-shadow: var(--shadow-lg);
 * }
 */

/* 
 * HERO BACKGROUND Override Examples
 * 
 * Option 1: Custom gradient colors
 * .hero::before {
 *   background: linear-gradient(135deg, #0F766E 0%, #D97706 100%);
 * }
 * 
 * Option 2: Image with gradient fallback
 * .hero::before {
 *   background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
 *   background-image: url('https://your-image-url-here.jpg');
 *   background-size: cover;
 *   background-position: center;
 * }
 */