:root {
    --color-global: #39B1B3;
    --color-white: #ffffff;
    --color-button: #2F989E;
    --color-button-border: #2B7188;
    --color-button-active: #245D71;
    --color-bg-light: #39B1B31F;
    --color-bg-soft: #39B1B333;
    --color-text-strong: #2B7188;
    --color-text-default: #2F989E;
    --color-text-muted: #2B7188B3;
    --color-text-soft: #2B718899;
    --color-border-soft: #39B1B34D;
    --color-border-default: #2B718866;
    --color-border-strong: #2B7188;

    /* Backward-compatible aliases for existing style usage */
    --e-global-color-e04868b: var(--color-button);
    --e-global-color-b3f2fee: var(--color-bg-light);
    --e-global-color-white: var(--color-white);
}

/* Tailwind utility overrides for consistent project branding */

.bg-white {
    background-color: var(--color-white);
}

.bg-gray-50 {
    background-color: var(--color-bg-light);
}

.bg-gray-100 {
    background-color: var(--color-bg-soft);
}

.text-gray-900,
.text-gray-800 {
    color: var(--color-text-strong);
}

.text-gray-700 {
    color: var(--color-text-default);
}

.text-gray-500 {
    color: var(--color-text-muted);
}

.text-gray-400 {
    color: var(--color-text-soft);
}

.border-gray-100 {
    border-color: var(--color-border-soft);
}

.border-gray-200 {
    border-color: var(--color-border-default);
}

.border-gray-300 {
    border-color: var(--color-border-strong);
}

.bg-indigo-50 {
    background-color: var(--color-bg-light);
}

.bg-indigo-100 {
    background-color: var(--color-bg-soft);
}

.bg-indigo-400 {
    background-color: var(--color-global);
}

.bg-indigo-600 {
    background-color: var(--color-button);
}

.bg-indigo-700,
.hover\:bg-indigo-700:hover {
    background-color: var(--color-button-border);
}

.bg-indigo-800,
.active\:bg-indigo-800:active {
    background-color: var(--color-button-active);
}

.text-indigo-500,
.text-indigo-600 {
    color: var(--color-button);
}

.text-indigo-700,
.text-indigo-800 {
    color: var(--color-button-border);
}

.border-indigo-200,
.border-indigo-300 {
    border-color: var(--color-border-default);
}

.border-indigo-500,
.hover\:border-indigo-300:hover {
    border-color: var(--color-button);
}

.focus\:ring-indigo-500:focus {
    --tw-ring-color: rgb(47 152 158 / 45%);
}

.accent-indigo-600 {
    accent-color: var(--color-button);
}

.site-header {
    background-color: transparent;
    background-image: linear-gradient(
        90deg,
        var(--color-button, #2F989E) 0%,
        var(--color-bg-light, #39B1B31F) 100%
    );
}

.site-footer {
    background-color: transparent;
}

.site-footer-main {
    /*background-image: linear-gradient(*/
    /*    90deg,*/
    /*    var(--color-bg-light, #39B1B31F) 0%,*/
    /*    var(--color-button, #2F989E) 100%*/
    /*);*/
}

.site-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: center;
}

.site-footer-brand {
    display: flex;
    justify-content: center;
}

.site-footer-logo {
    border-radius: 130px 130px 130px 130px;
    height: 100px;
    width: auto;
}

.site-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.625rem 1.125rem;
}

.site-footer-links a {
    color: var(--color-white);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.site-footer-links a:hover {
    opacity: 0.8;
}

.site-footer-social {
    display: flex;
    justify-content: center;
    gap: 0.625rem;
}

.site-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 9999px;
    border: 1px solid var(--color-white);
    color: var(--color-white);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.site-footer-icon {
    width: 18px;
    height: 18px;
}

.site-footer-social a:hover {
    background-color: var(--color-white);
    color: var(--color-button-border);
    transform: translateY(-1px);
}

.site-footer {
    background-image: linear-gradient(
        90deg,
        var(--color-bg-light, #39B1B31F) 0%,
        var(--color-button, #2F989E) 100%
    );
    color: var(--color-white);
    /*margin-top: 0.625rem;*/
    /*border-radius: 12px;*/
}

.site-footer-bottom {
    background: transparent;
    color: inherit;
}

@media (min-width: 1024px) {
    .site-footer-grid {
        grid-template-columns: auto 1fr auto;
        gap: 2.5rem;
    }

    .site-footer-brand {
        justify-content: flex-start;
    }

    .site-footer-logo {
        height: 100px;
    }

    .site-footer-links {
        justify-content: center;
        gap: 0.75rem 1.25rem;
    }

    .site-footer-social {
        justify-content: flex-end;
    }
}

body {
    background-color: var(--color-bg-light);
}