:root {
    --font-body: 'Jost', Arial, sans-serif;
    --primary: #008000;
    --bs-primary: #008000;
    --bs-primary-rgb: 0, 128, 0;
    --bs-link-color: #008000;
    --bs-link-hover-color: #008000;
    --bs-link-color-rgb: 0, 128, 0;
    --bs-link-hover-color-rgb: 6, 77, 35;
    --brand-leaf: #348a21;
    --brand-dark: #064d23;
    --secondary: #f47709;
    --accent: #064d23;
    --on-primary: #fff;
    --type-page: 1.5rem;
    --type-section: 1.25rem;
    --type-card-title: 1.125rem;
    --type-body: 1rem;
    --type-label: 0.875rem;
    --type-meta: 0.8125rem;
    --type-kpi: 1.5rem;
    --heading-ink: #243746;
}

@media screen and (min-width: 768px) {
    :root {
        --type-page: 2rem;
        --type-section: 1.5rem;
        --type-card-title: 1.25rem;
        --type-meta: 0.875rem;
        --type-kpi: 1.75rem;
    }
}

@media screen and (min-width: 1200px) {
    :root {
        --type-page: 2.25rem;
        --type-label: 0.9375rem;
        --type-kpi: 2rem;
    }
}

@media screen {
    .hero {
        background: var(--brand-leaf);
    }

    .hero h1 {
        color: #fff;
    }

    .hero > p {
        color: var(--on-primary);
    }

    .footer {
        background: var(--brand-dark);
    }

    .sub-nav a.active,
    .vaccine-sub-nav .vaccine-tab.active,
    .vaccine-sub-nav .vaccine-tab[aria-pressed="true"],
    .btn-landing-primary,
    .btn-landing-primary:hover,
    .btn-details,
    .btn-details:hover,
    .about-link-btn:hover {
        color: #111;
    }

    .btn-outline-primary {
        --bs-btn-color: var(--primary);
        --bs-btn-border-color: var(--primary);
        --bs-btn-hover-bg: var(--primary);
        --bs-btn-hover-border-color: var(--primary);
        --bs-btn-active-bg: var(--primary);
        --bs-btn-active-border-color: var(--primary);
        --bs-btn-hover-color: var(--on-primary);
        --bs-btn-active-color: var(--on-primary);
    }

    .btn-primary {
        --bs-btn-bg: var(--primary);
        --bs-btn-border-color: var(--primary);
        --bs-btn-hover-bg: var(--primary);
        --bs-btn-hover-border-color: var(--primary);
        --bs-btn-active-bg: var(--primary);
        --bs-btn-active-border-color: var(--primary);
        --bs-btn-color: var(--on-primary);
        --bs-btn-hover-color: var(--on-primary);
        --bs-btn-active-color: var(--on-primary);
    }

    .btn-primary,
    .btn-primary:hover,
    .btn-login,
    .btn-login:hover,
    .meat-download-btn,
    .meat-download-btn:hover {
        background-color: var(--primary);
        border-color: var(--primary);
        color: var(--on-primary);
    }

    .footer,
    .footer :is(h3, p, a, span),
    .footer a:hover,
    .sub-nav a,
    .vaccine-sub-nav :is(a, button),
    .county-context-banner {
        color: var(--on-primary);
    }

    body {
        font-family: var(--font-body, 'Jost', Arial, sans-serif);
        font-size: var(--type-body);
        line-height: 1.5;
    }

    .hero h1,
    .landing-hero h1,
    .summary-header h1,
    .summary-header h3,
    .dashboard-header h1,
    main > .container > .header h1,
    .login-container .login-title,
    .pending-card .pending-title,
    .error-title,
    .page-title {
        font-size: var(--type-page);
        font-style: normal;
        font-weight: 700;
        line-height: 1.2;
        overflow-wrap: break-word;
        text-wrap: balance;
    }

    .section-title,
    .section-header h2,
    .landing-section-title,
    .frontend-view > h2,
    .yearly-maps-title,
    .section-heading {
        color: var(--heading-ink);
        font-size: var(--type-section);
        font-style: normal;
        font-weight: 600;
        line-height: 1.3;
        overflow-wrap: break-word;
    }

    .chart-container :is(h1, h2, h3, h4),
    .table-container > :is(h1, h2, h3, h4),
    .about-container > :is(h2, h3, h4),
    .health-card-header h4,
    .landing-feature h3,
    .landing-mission-links h3,
    .policy-title,
    .modal-title,
    .trend-header .trend-header-title,
    .updates-filter-heading h2,
    .card-heading {
        color: var(--heading-ink);
        font-size: var(--type-card-title);
        font-style: normal;
        font-weight: 600;
        line-height: 1.35;
        text-align: left;
        overflow-wrap: break-word;
    }

    .trend-header-title strong,
    .chart-container h4 strong,
    .table-container h4 strong {
        font-weight: inherit;
    }

    .vacc-kpi-value,
    .stat-value,
    .stat-number,
    .stat-info h3 {
        font-size: var(--type-kpi);
        font-weight: 700;
        line-height: 1.2;
        font-variant-numeric: tabular-nums;
    }

    .hero > p,
    .landing-hero-lead,
    .landing-section-lead,
    .summary-intro,
    .dashboard-header p.text-muted,
    .login-subtitle,
    .pending-subtitle,
    .step-item,
    .about-tab-panel :is(p, li) {
        font-size: var(--type-body);
        line-height: 1.5;
    }

    #about-disease-title {
        font-size: var(--type-card-title);
        font-weight: 600;
        line-height: 1.35;
    }

    .about-tab-panel h4 {
        color: var(--heading-ink);
        font-size: var(--type-body);
        font-style: normal;
        font-weight: 600;
        line-height: 1.4;
    }

    .filter-group label,
    main .form-label,
    .filtervacc-group label,
    .catalogue-filter label,
    .form-group > label,
    .auth-field > label,
    .admin-user-filter > label,
    .filter-label,
    .coverage-label,
    .vacc-kpi-label,
    .stat-label,
    .stat-info > p,
    .kpi-card > h3,
    .updates-kpi-container h3 {
        font-size: var(--type-label);
        font-style: normal;
        font-weight: 600;
        line-height: 1.4;
        letter-spacing: normal;
        text-transform: none;
    }

    main .form-control,
    main .form-select,
    .filter-group > select,
    .filtervacc-group > select,
    .filter-group > .bootstrap-select > button,
    .county-select-wrapper select,
    .btn-login,
    .btn-back,
    .btn-landing {
        font-size: var(--type-body);
        font-family: inherit;
        line-height: 1.4;
    }

    .section-title small,
    .trend-header > small,
    .chart-subtitle,
    .data-source p,
    .updates-map-legend,
    .updates-period,
    .updates-status,
    .dashboard-filters [role="status"],
    .meat-generated-at,
    .contact-note,
    .health-card-header .text-muted,
    .form-text,
    .coverage-label small,
    .vacc-kpi-label small,
    .chart-note,
    .type-meta {
        font-size: var(--type-meta);
        font-style: normal;
        font-weight: 400;
        line-height: 1.5;
    }

    .section-title small {
        display: block;
        margin-top: 0.25rem;
    }

    .chart-container .badge {
        max-width: 100%;
        font-size: var(--type-meta);
        font-weight: 600;
        line-height: 1.4;
        white-space: normal;
    }

    .footer-section h3 {
        font-size: 1.125rem;
        font-weight: 700;
        line-height: 1.4;
    }

    .footer-section :is(p, a, span) {
        font-size: var(--type-body);
        line-height: 1.5;
    }
}