:root {
    --lpx-theme-light-bg: url('/LeptonX/images/login-pages/login-bg-img-light.svg');
    --lpx-theme-dim-bg: url('/LeptonX/images/login-pages/login-bg-img-dim.svg');
    --lpx-theme-dark-bg: url('/LeptonX/images/login-pages/login-bg-img-dark.svg');
    
    /* ABP LeptonX Brand Color Configuration */
    /* Logo is configured via IBrandingProvider and environment.logoUrl */
    /* DO NOT override --lpx-logo or --lpx-logo-icon here */
    --lpx-brand: #2C5AA0; /* Triarch primary color */
    
    /* Triarch brand alias variables (theme-based) */
    --triarch-brand: var(--lpx-brand, #2C5AA0);
    --triarch-accent: var(--bs-success, #00BFA0);
    --triarch-accent-hover: var(--bs-success-text-emphasis, #00a087);
    --triarch-brand-hover: var(--lpx-brand-hover, #1e4a7a);
    
    /* Triarch gradient variables (theme-based) */
    --triarch-gradient-start: var(--triarch-brand);
    --triarch-gradient-end: var(--triarch-accent);
    --triarch-gradient-hover-start: var(--triarch-brand-hover);
    --triarch-gradient-hover-end: var(--triarch-accent-hover);
}


/* Uses CSS variables for theme compatibility - adapts to --lpx-brand changes */
.triarch-link {
    color: var(--lpx-brand, #2C5AA0);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease, background 0.25s ease;

    /* Gradient text for supporting browsers (Chrome, Safari, Edge) */
    background: linear-gradient(135deg, var(--triarch-gradient-start), var(--triarch-gradient-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.triarch-link:hover {
    /* Fallback hover color */
    color: var(--triarch-gradient-hover-start, #1e4a7a);
    text-decoration: underline;

    /* Hover gradient for supporting browsers */
    background: linear-gradient(135deg, var(--triarch-gradient-hover-start), var(--triarch-gradient-hover-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.triarch-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    text-decoration: underline;
}

/* High-contrast mode support for accessibility */
@media (forced-colors: active) {
    .triarch-link {
        /* Disable gradient tricks in high-contrast mode */
        background: none !important;
        -webkit-background-clip: border-box;
        -webkit-text-fill-color: LinkText;
        background-clip: border-box;
        color: LinkText;
        text-decoration: underline;
    }

    .triarch-link:hover,
    .triarch-link:focus-visible {
        color: LinkText;
        text-decoration: underline;
        outline: 2px solid LinkText;
        outline-offset: 2px;
    }
}