@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700;900&family=Raleway:wght@700;800;900&display=swap');

:root {
    /* ===== COLORS ===== */
    --primary: #2D5F2D;
    --primaryShade: #4A8B4A;
    --primaryDark: #1B3A1B;
    --accent: #D8A84E;
    --lightBg: #F4F7EF;
    --darkBg: #102415;

    --headerColor: #1a1a1a;
    --bodyTextColor: #4E4B66;
    --bodyTextColorWhite: #FAFBFC;

    /* ===== TYPOGRAPHY ===== */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    --headerFontSize: clamp(1.9375rem, 4.5vw, 3.0625rem);
    --bodyFontSize: 1rem;
    --headingFont: 'Raleway', Arial, Helvetica, sans-serif;
    --bodyFont: 'Merriweather', Georgia, 'Times New Roman', serif;

    /* ===== SPACING ===== */
    --sectionPadding: clamp(3.75em, 7.82vw, 6.25em) 1rem;
}

/* ===== GLOBAL TEXT CLASSES ===== */
.cs-topper {
    font-family: var(--headingFont);
    font-size: var(--topperFontSize);
    font-weight: 700;
    line-height: 1.2em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary);
    display: block;
    margin-bottom: 0.25rem;
}

.cs-title {
    font-family: var(--headingFont);
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    color: var(--headerColor);
    margin: 0 0 1rem 0;
}

.cs-text {
    font-family: var(--bodyFont);
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    color: var(--bodyTextColor);
    margin: 0 0 1rem 0;
}

.cs-text:last-of-type {
    margin-bottom: 0;
}

/* ===== BUTTON SYSTEM ===== */
.cs-button-solid {
    font-family: var(--headingFont);
    font-size: 1rem;
    font-weight: 700;
    line-height: 3.125em;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    height: 3.125rem;
    padding: 0 1.875rem;
    position: relative;
    z-index: 1;
    background-color: var(--primary);
    color: #fff;
    transition: color 0.3s;
    border: none;
    cursor: pointer;
}

.cs-button-solid::before {
    content: '';
    position: absolute;
    display: block;
    height: 100%;
    width: 0;
    background: #1a1a1a;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
}

.cs-button-solid:hover {
    color: #fff;
}

.cs-button-solid:hover::before {
    width: 100%;
}