:root {
    /* desktop navigation (shared defaults) */
    --desktop-nav-text: var(--color-gray-800);
    --desktop-nav-hover: var(--color-gray-700);

    /* mobile navigation (shared defaults) */
    --mobile-nav-text: var(--color-gray-600);
    --mobile-nav-hover-text: var(--color-gray-700);
    --mobile-nav-hover-bg: var(--color-gray-50);
    --mobile-nav-hover-border: var(--color-gray-300);

    --mobile-nav-focus-text: var(--color-gray-800);
    --mobile-nav-focus-bg: var(--color-gray-50);
    --mobile-nav-focus-border: var(--color-gray-300);

    /* footer */
    --footer-bg: var(--color-white);

    /* donation-form */
    --donation-form-button-text: var(--color-white);
    --donation-form-button-hover-text: var(--color-white);
    --donation-form-preset-bg: var(--color-gray-100);
    --donation-form-preset-text: var(--color-gray-600);
    --donation-form-preset-hover-bg: var(--color-gray-200);
    --donation-form-preset-active-bg: var(--donation-form-button-bg);
    --donation-form-preset-active-text: var(--color-white);
    --donation-form-impact-bg: rgba(255 255 255 / 0.12);
    --donation-form-impact-border: rgba(255 255 255 / 0.2);
    --donation-form-counter-border: var(--color-gray-200);
    --donation-form-counter-bg: var(--color-white);

    /* buttons */
    --button-default-text: var(--color-white);
    --button-default-hover-text: var(--color-white);

    /* cards */
    --card-bg: var(--color-white);
    --card-border: var(--color-gray-100);
    --card-shadow: var(--shadow-card);
    --card-radius: 1rem;
    --card-hover-shadow: var(--shadow-elevated);

    /* sections */
    --section-bg-alt: var(--color-gray-50);
    --section-bg-muted: var(--color-surface-50);
    --section-gradient-angle: 135deg;

    /* spacer */
    --spacer-radius: 999px;

    /* buttons */
    --button-radius: 0.75rem;
    --button-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);

    /* transitions */
    --transition-fast: 150ms;
    --transition-base: 200ms;
    --transition-slow: 300ms;

    /* focus */
    --focus-ring-color: var(--color-gray-300);
    --focus-ring-offset: 2px;
}

:root {
    /* desktop navigation */
    --desktop-nav-hover-border: var(--color-f4f-green-300);
    --desktop-nav-active: var(--color-f4f-green-700);
    --desktop-nav-active-border: var(--color-f4f-green-700);
    --desktop-nav-active-bg: var(--color-f4f-green-50);

    /* mobile navigation */
    --mobile-nav-active-text: var(--color-white);
    --mobile-nav-active-bg: var(--color-f4f-green-500);

    /* footer */
    --footer-text: var(--color-f4f-green-500);
    --footer-link-text: var(--color-f4f-green-500);
    --footer-link-hover: var(--color-f4f-green-800);

    /* donation-form */
    --donation-form-button-bg: var(--color-f4f-green-600);
    --donation-form-button-hover-bg: var(--color-f4f-green-700);

    /* spacer */
    --spacer-bg: var(--color-f4f-green-500);

    /* buttons */
    --button-default-bg: var(--color-f4f-green-600);
    --button-default-hover-bg: var(--color-f4f-green-700);

    /* section gradient */
    --section-gradient-from: var(--color-f4f-green-500);
    --section-gradient-to: var(--color-f4f-green-700);

    /* cards & sections */
    --card-border: var(--color-f4f-green-100);
    --section-bg-alt: var(--color-f4f-green-100);
    --focus-ring-color: var(--color-f4f-green-300);

    /* prose links */
    --prose-link-color: var(--color-f4f-green-600);
    --prose-link-hover-color: var(--color-f4f-green-400);

    /* text-gradients */
    --text-gradient-fallback-color: var(--color-f4f-green-600);
    --text-gradient-start-color: var(--color-f4f-green-600);
    --text-gradient-stop-color: var(--color-f4f-green-900);
    --text-gradient-value: linear-gradient(135deg, var(--text-gradient-start-color), var(--text-gradient-stop-color));

    --text-gradient-bright-fallback-color: var(--color-f4f-green-50);
    --text-gradient-bright-start-color: var(--color-white);
    --text-gradient-bright-stop-color: var(--color-f4f-green-400);
    --text-gradient-bright-value: linear-gradient(135deg, var(--text-gradient-bright-start-color), var(--text-gradient-bright-stop-color));
}