/* Wall Ministries - Base Styles
   Foundation: Variables, Reset, Typography */

/* CSS Custom Properties (Variables) */
:root {
    --primary-dark: #1a4d2e;
    --primary-medium: #2c6e49;
    --primary-light: #4c956c;
    --accent: #d4a373;
    --light-accent: #e9edc9;
    --text-dark: #333333;
    --text-light: #f8f9fa;
    --background-light: #ffffff;
    --error-color: #dc3545;
    --success-color: #28a745;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
    --border-color: #dee2e6;
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --border-radius: 5px;
}

/* Base Styles and Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Open Sans', sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    background-color: var(--background-light);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Lora', serif;
    line-height: 1.2;
    margin-bottom: var(--spacing-sm);
    color: var(--primary-dark);
}

p {
    margin-bottom: var(--spacing-sm);
}

a {
    color: var(--primary-medium);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--primary-dark);
}

img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius);
}

/* Utility Classes */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

section {
    padding: var(--spacing-lg) 0;
}