/* ===== CSS VARIABLES ===== */
:root {
    /* Color Palette */
    --primary-purple: #3CB371; /* Medium Sea Green */
    --primary-gradient: linear-gradient(135deg, #3CB371 0%, #1e90ff 100%); /* Medium Sea Green → Dodger Blue */
    --accent-yellow: #FCD34D;
    --light-grey-bg: #F8F9FA;
    --light-grey-border: #E5E7EB;
    --text-dark: #0B0F1C;
    --text-muted: #666666;
    --white: #FFFFFF;
    --success-green: #10B981;
    --shadow-black: rgba(0, 0, 0, 0.05);
    
    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading: 'Merriweather', Georgia, serif;
    --font-logo: 'Poppins', sans-serif;
    
    /* Spacing */
    --container-width: 1200px;
    --grid-gutter: 30px;
    --card-padding: 20px;
    --section-padding: 80px;
    --border-radius: 10px;
    --transition: all 0.2s ease-in-out;
}

/* ===== RESET & BASE STYLES ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-primary);
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-dark);
    background-color: var(--white);
}

/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
}

h1 { font-size: 36px; }
h2 { font-size: 28px; }
h3 { font-size: 20px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }

p {
    margin-bottom: 1rem;
    color: var(--text-muted);
    font-size: 14px;
}

/* ===== LAYOUT ===== */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 40px;
}

.section {
    padding: var(--section-padding) 0;
    position: relative;
    z-index: 5;
}